@sonic-equipment/ui 192.0.0 → 194.0.0

package/dist/background-overlay/background-overlay.js

@@ -1,5 +1,5 @@
 "use client";
-import { useMemo, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { BackgroundOverlayManager } from './background-overlay-manager.js';
 
 /**
@@ -10,10 +10,16 @@ function BackgroundOverlay({ isOpen, onClick, onClose, position = 'in-front', })
      * An instance of the BackgroundOverlay class is
      * created using the BackgroundOverlayManager.
      */
-    const backgroundOverlay = useMemo(() => BackgroundOverlayManager.createBackgroundOverlay(), []);
+    const [backgroundOverlay, setBackgroundOverlay] = useState();
     useEffect(() => {
+        // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
+        setBackgroundOverlay(backgroundOverlay => {
+            if (backgroundOverlay)
+                return backgroundOverlay;
+            return BackgroundOverlayManager.createBackgroundOverlay();
+        });
         /* Mount or update the background overlay instance */
-        backgroundOverlay.mountOrUpdate({
+        backgroundOverlay?.mountOrUpdate({
             isVisible: isOpen,
             onClick,
             onClose,
@@ -22,11 +28,11 @@ function BackgroundOverlay({ isOpen, onClick, onClose, position = 'in-front', })
     }, [backgroundOverlay, isOpen, onClick, onClose, position]);
     useEffect(() => {
         /* Show or hide the background overlay */
-        backgroundOverlay.show(isOpen);
+        backgroundOverlay?.show(isOpen);
     }, [backgroundOverlay, isOpen]);
     useEffect(() => {
         /* Unmount the background overlay instance */
-        return () => backgroundOverlay.unmount();
+        return () => backgroundOverlay?.unmount();
     }, [backgroundOverlay]);
     return null;
 }

package/dist/exports.d.ts

@@ -267,7 +267,6 @@ export * from './pages/my-sonic/widgets/connected-bill-to-address-widget';
 export * from './pages/my-sonic/widgets/connected-customer-information-widget';
 export * from './pages/my-sonic/widgets/connected-ship-to-address-widget';
 export * from './pages/my-sonic/widgets/connected-user-account-widget';
-export * from './pages/paths';
 export * from './pages/product/components/product-overview';
 export * from './pages/product/layouts/product-details-page-layout/product-details-page-layout';
 export * from './pages/product/product-details-page/components/product-details-images/product-detail-images';
@@ -404,6 +403,7 @@ export * from './shared/routing/types';
 export * from './shared/routing/use-location';
 export * from './shared/routing/use-navigate';
 export * from './shared/routing/use-on-navigate';
+export * from './shared/routing/use-paths';
 export * from './shared/routing/use-route-link';
 export * from './shared/routing/use-route-link-element';
 export * from './shared/routing/with-routing';

package/dist/header/buttons/account/connected-account-button.d.ts

@@ -1,7 +1,6 @@
 export interface ConnectedAccountButtonProps {
     className?: string;
     'data-test-selector'?: string;
-    href?: string;
     onClick?: () => void;
 }
-export declare function ConnectedAccountButton({ className, 'data-test-selector': dataTestSelector, href, onClick, }: ConnectedAccountButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function ConnectedAccountButton({ className, 'data-test-selector': dataTestSelector, onClick, }: ConnectedAccountButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/header/buttons/account/connected-account-button.js

@@ -3,12 +3,18 @@ import { jsx } from 'react/jsx-runtime';
 import { IconButton } from '../../../buttons/icon-button/icon-button.js';
 import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
 import { AccountIcon } from '../../../navigation/account-icon/account-icon.js';
-import { useFetchSession } from '../../../shared/api/storefront/hooks/authentication/use-fetch-session.js';
+import { useIsAuthenticated } from '../../../shared/api/storefront/hooks/authentication/use-is-authenticated.js';
+import { useLocation } from '../../../shared/routing/use-location.js';
+import { usePaths } from '../../../shared/routing/use-paths.js';
 
-function ConnectedAccountButton({ className, 'data-test-selector': dataTestSelector, href, onClick, }) {
+function ConnectedAccountButton({ className, 'data-test-selector': dataTestSelector, onClick, }) {
+    const paths = usePaths();
     const t = useFormattedMessage();
-    const { data: { isAuthenticated } = {} } = useFetchSession();
-    return (jsx(IconButton, { className: className, "data-authenticated": isAuthenticated ? true : false, "data-test-selector": dataTestSelector, href: href, onClick: onClick, children: jsx(AccountIcon, { "aria-label": isAuthenticated ? t('My Sonic') : t('Sign in or create account'), isAuthenticated: isAuthenticated }) }));
+    const isAuthenticated = useIsAuthenticated();
+    const { href: returnUrl } = useLocation();
+    return (jsx(IconButton, { className: className, "data-authenticated": isAuthenticated ? true : false, "data-test-selector": dataTestSelector, href: isAuthenticated
+            ? paths.ACCOUNT
+            : `${paths.SIGN_IN}${returnUrl ? `?returnUrl=${encodeURIComponent(returnUrl)}` : ''}`, onClick: onClick, children: jsx(AccountIcon, { "aria-label": isAuthenticated ? t('My Sonic') : t('Sign in or create account'), isAuthenticated: isAuthenticated }) }));
 }
 
 export { ConnectedAccountButton };

package/dist/header/header.js

@@ -5,11 +5,11 @@ import clsx from 'clsx';
 import { useDrawer } from '../drawer/use-drawer.js';
 import { useGlobalSearchDisclosure } from '../global-search/global-search-provider/use-search-disclosure.js';
 import { useFormattedMessage } from '../intl/use-formatted-message.js';
-import { PATHS } from '../pages/paths.js';
 import { isNavigationLink, isNavigationSection, isNavigationLinkItem } from '../shared/api/bff/model/bff.model.js';
 import { useIsBreakpoint } from '../shared/hooks/use-is-breakpoint.js';
 import { useResizeObserver } from '../shared/hooks/use-resize-observer.js';
 import { useOnNavigate } from '../shared/routing/use-on-navigate.js';
+import { usePaths } from '../shared/routing/use-paths.js';
 import { ConnectedAccountButton } from './buttons/account/connected-account-button.js';
 import { ConnectedCartButton } from './buttons/cart/connected-cart-button.js';
 import { ConnectedFavoritesButton } from './buttons/favorites/connected-favorites-button.js';
@@ -24,6 +24,7 @@ import { SonicLogo } from './sonic-logo/sonic-logo.js';
 import styles from './header.module.css.js';
 
 function Header({ className, headerNavigationSection, sticky, }) {
+    const paths = usePaths();
     const [activeLinkGroup, setActiveLinkGroup] = useState();
     const t = useFormattedMessage();
     const isXl = useIsBreakpoint('xl');
@@ -72,7 +73,7 @@ function Header({ className, headerNavigationSection, sticky, }) {
     const mainNavigationSection = headerNavigationSection?.items
         .filter(isNavigationSection)
         .find(item => item.key === 'main-navigation');
-    return (jsxs(Fragment, { children: [jsx("header", { ref: headerRef, className: clsx(styles['header'], sticky && styles['sticky'], className), "data-test-selector": "pageHeader", children: jsx(HeaderLayout, { hamburgerButton: jsx(HamburgerButton, { "aria-controls": "mobile-navigation", "data-test-selector": "pageHeaderHamburgerButton", isActive: mobileNavigationOpen, onActiveChange: toggleMobileNavigation }), hasDrawersOpen: hasDrawersOpen, logo: jsx(SonicLogo, { "data-test-selector": "pageHeaderLogo", href: homeLink?.href || undefined, title: t('Home') }), mainNavigation: jsx(NavigationLinkList, { activeLink: activeLinkGroup, "data-test-selector": "pageHeaderMainNavigation", navigationSection: mainNavigationSection, onSubmenuToggle: toggleActiveSubmenu }), navigationActions: jsxs(Fragment, { children: [jsx(ConnectedAccountButton, { "data-test-selector": "pageHeaderAccountButton", href: PATHS.ACCOUNT }), jsx(ConnectedFavoritesButton, { "data-test-selector": "pageHeaderFavoritesButton", href: PATHS.FAVORITES }), jsx(ConnectedCartButton, { "data-test-selector": "pageHeaderCartButton", href: PATHS.CART })] }), search: jsx(SearchButton, { "aria-controls": "global-search", "data-test-selector": "pageHeaderSearchButton", isActive: searchOpen, onActiveChange: toggleSearch }) }) }), jsx(SearchDrawer, { groupId: searchGroupId, instanceId: searchInstanceId }), !isXl && (jsx(MobileNavigationDrawer, { groupId: mobileNavigationDrawer.groupId, instanceId: mobileNavigationDrawer.instanceId, linkItems: mainNavigationSection?.items.filter(isNavigationLinkItem) })), isXl && (jsx(DesktopNavigationDrawer, { groupId: desktopNavigationDrawer.groupId, instanceId: desktopNavigationDrawer.instanceId, linkGroup: activeLinkGroup, onClosed: () => setActiveLinkGroup(undefined) }))] }));
+    return (jsxs(Fragment, { children: [jsx("header", { ref: headerRef, className: clsx(styles['header'], sticky && styles['sticky'], className), "data-test-selector": "pageHeader", children: jsx(HeaderLayout, { hamburgerButton: jsx(HamburgerButton, { "aria-controls": "mobile-navigation", "data-test-selector": "pageHeaderHamburgerButton", isActive: mobileNavigationOpen, onActiveChange: toggleMobileNavigation }), hasDrawersOpen: hasDrawersOpen, logo: jsx(SonicLogo, { "data-test-selector": "pageHeaderLogo", href: homeLink?.href || undefined, title: t('Home') }), mainNavigation: jsx(NavigationLinkList, { activeLink: activeLinkGroup, "data-test-selector": "pageHeaderMainNavigation", navigationSection: mainNavigationSection, onSubmenuToggle: toggleActiveSubmenu }), navigationActions: jsxs(Fragment, { children: [jsx(ConnectedAccountButton, { "data-test-selector": "pageHeaderAccountButton" }), jsx(ConnectedFavoritesButton, { "data-test-selector": "pageHeaderFavoritesButton", href: paths.FAVORITES }), jsx(ConnectedCartButton, { "data-test-selector": "pageHeaderCartButton", href: paths.CART })] }), search: jsx(SearchButton, { "aria-controls": "global-search", "data-test-selector": "pageHeaderSearchButton", isActive: searchOpen, onActiveChange: toggleSearch }) }) }), jsx(SearchDrawer, { groupId: searchGroupId, instanceId: searchInstanceId }), !isXl && (jsx(MobileNavigationDrawer, { groupId: mobileNavigationDrawer.groupId, instanceId: mobileNavigationDrawer.instanceId, linkItems: mainNavigationSection?.items.filter(isNavigationLinkItem) })), isXl && (jsx(DesktopNavigationDrawer, { groupId: desktopNavigationDrawer.groupId, instanceId: desktopNavigationDrawer.instanceId, linkGroup: activeLinkGroup, onClosed: () => setActiveLinkGroup(undefined) }))] }));
 }
 
 export { Header };

package/dist/index.js

@@ -262,14 +262,13 @@ export { MySonicLayoutTitle } from './pages/my-sonic/layouts/my-sonic-layout/my-
 export { ConnectedMySonicNavigation } from './pages/my-sonic/navigation/connected-my-sonic-navigation.js';
 export { MySonicDesktopNavigation } from './pages/my-sonic/navigation/my-sonic-desktop-navigation.js';
 export { MySonicMobileNavigation } from './pages/my-sonic/navigation/my-sonic-mobile-navigation.js';
-export { mySonicNavigationItems } from './pages/my-sonic/navigation/my-sonic-navigation-items.js';
+export { useMySonicNavigationItems } from './pages/my-sonic/navigation/my-sonic-navigation-items.js';
 export { OrderHistory } from './pages/my-sonic/pages/order-history/order-history.js';
 export { AddressDataCard } from './pages/my-sonic/widgets/components/address-data-card.js';
 export { ConnectedBillToAddressWidget } from './pages/my-sonic/widgets/connected-bill-to-address-widget.js';
 export { ConnectedCustomerInformationWidget } from './pages/my-sonic/widgets/connected-customer-information-widget.js';
 export { ConnectedShipToAddressWidget } from './pages/my-sonic/widgets/connected-ship-to-address-widget.js';
 export { ConnectedUserAccountWidget } from './pages/my-sonic/widgets/connected-user-account-widget.js';
-export { PATHS } from './pages/paths.js';
 export { ProductOverview } from './pages/product/components/product-overview.js';
 export { ProductDetailsPageLayout } from './pages/product/layouts/product-details-page-layout/product-details-page-layout.js';
 export { ProductDetailImages } from './pages/product/product-details-page/components/product-details-images/product-detail-images.js';
@@ -403,6 +402,7 @@ export { buildHref } from './shared/routing/route-utils.js';
 export { useLocation } from './shared/routing/use-location.js';
 export { useNavigate } from './shared/routing/use-navigate.js';
 export { useOnNavigate } from './shared/routing/use-on-navigate.js';
+export { usePaths } from './shared/routing/use-paths.js';
 export { useRouteLink } from './shared/routing/use-route-link.js';
 export { useRouteLinkElement } from './shared/routing/use-route-link-element.js';
 export { withRouting } from './shared/routing/with-routing.js';

package/dist/navigation/mobile-navigation/mobile-navigation.js

@@ -6,9 +6,9 @@ import { SonicLogo } from '../../header/sonic-logo/sonic-logo.js';
 import { useFormattedMessage } from '../../intl/use-formatted-message.js';
 import { MenuList } from '../../lists/menu-list/menu-list.js';
 import { MenuListItem } from '../../lists/menu-list/menu-list-item.js';
-import { PATHS } from '../../pages/paths.js';
 import { useFetchSession } from '../../shared/api/storefront/hooks/authentication/use-fetch-session.js';
 import { useFetchCurrentCartCount } from '../../shared/api/storefront/hooks/cart/use-fetch-current-cart-count.js';
+import { usePaths } from '../../shared/routing/use-paths.js';
 import { AccountIcon } from '../account-icon/account-icon.js';
 import { CartIcon } from '../cart-icon/cart-icon.js';
 import { FavoriteIcon } from '../favorite-icon/favorite-icon.js';
@@ -17,9 +17,10 @@ import styles from './mobile-navigation.module.css.js';
 
 function MobileNavigation({ id, isActive, linkItems, onActiveChange, }) {
     const t = useFormattedMessage();
+    const paths = usePaths();
     const { data: { isAuthenticated } = {} } = useFetchSession();
     const cartCount = useFetchCurrentCartCount();
-    return (jsxs("section", { "aria-label": t('Main menu'), className: clsx(styles['mobile-navigation'], isActive && styles['active']), "data-test-selector": "mobileNavigationMenu", id: id, children: [jsxs("header", { className: styles['header'], children: [jsx("div", { className: styles['logo'], role: "presentation", children: jsx(SonicLogo, {}) }), jsx("div", { className: styles['hamburger'], children: jsx(HamburgerButton, { "aria-controls": "mobile-navigation", "data-test-selector": "mobileNavigationHamburgerButton", isActive: isActive, onActiveChange: onActiveChange }) })] }), jsx(PanelNavigation, { allowBack: true, className: styles['panels'], "data-test-selector": "mobileNavigationPanel", isNarrow: true, linkItems: linkItems, variant: "primary", children: jsxs(MenuList, { header: { label: t('My Sonic') }, scrollable: false, children: [jsx(MenuListItem, { badge: jsx(AccountIcon, { isAuthenticated: isAuthenticated }), "data-authenticated": isAuthenticated ? true : false, "data-test-selector": "mobileNavigationAccountButton", href: PATHS.ACCOUNT, children: isAuthenticated ? t('My Sonic') : t('Sign in or create account') }), jsx(MenuListItem, { badge: jsx(FavoriteIcon, {}), "data-test-selector": "mobileNavigationFavoritesButton", href: PATHS.FAVORITES, children: t('Favorites') }), jsx(MenuListItem, { badge: jsx(CartIcon, { count: cartCount }), "data-count": cartCount, "data-test-selector": "mobileNavigationCartButton", href: PATHS.CART, children: t('Shopping cart') })] }) })] }));
+    return (jsxs("section", { "aria-label": t('Main menu'), className: clsx(styles['mobile-navigation'], isActive && styles['active']), "data-test-selector": "mobileNavigationMenu", id: id, children: [jsxs("header", { className: styles['header'], children: [jsx("div", { className: styles['logo'], role: "presentation", children: jsx(SonicLogo, {}) }), jsx("div", { className: styles['hamburger'], children: jsx(HamburgerButton, { "aria-controls": "mobile-navigation", "data-test-selector": "mobileNavigationHamburgerButton", isActive: isActive, onActiveChange: onActiveChange }) })] }), jsx(PanelNavigation, { allowBack: true, className: styles['panels'], "data-test-selector": "mobileNavigationPanel", isNarrow: true, linkItems: linkItems, variant: "primary", children: jsxs(MenuList, { header: { label: t('My Sonic') }, scrollable: false, children: [jsx(MenuListItem, { badge: jsx(AccountIcon, { isAuthenticated: isAuthenticated }), "data-authenticated": isAuthenticated ? true : false, "data-test-selector": "mobileNavigationAccountButton", href: paths.ACCOUNT, children: isAuthenticated ? t('My Sonic') : t('Sign in or create account') }), jsx(MenuListItem, { badge: jsx(FavoriteIcon, {}), "data-test-selector": "mobileNavigationFavoritesButton", href: paths.FAVORITES, children: t('Favorites') }), jsx(MenuListItem, { badge: jsx(CartIcon, { count: cartCount }), "data-count": cartCount, "data-test-selector": "mobileNavigationCartButton", href: paths.CART, children: t('Shopping cart') })] }) })] }));
 }
 
 export { MobileNavigation };

package/dist/pages/account/create-account-page/create-account-page.js

@@ -8,19 +8,20 @@ import { useCreateAccount } from '../../../shared/api/storefront/hooks/account/u
 import { useFetchSession } from '../../../shared/api/storefront/hooks/authentication/use-fetch-session.js';
 import { ExistingAccountError } from '../../../shared/api/storefront/services/account-service.js';
 import { useNavigate } from '../../../shared/routing/use-navigate.js';
+import { usePaths } from '../../../shared/routing/use-paths.js';
 import { LoadingPage } from '../../loading-page/loading-page.js';
-import { PATHS } from '../../paths.js';
 import { CreateAccountForm } from '../components/create-account-form/create-account-form.js';
 import { SignInPageLayout } from '../layouts/sign-in-page-layout/sign-in-page-layout.js';
 
 function CreateAccountPage({ returnUrl } = {}) {
+    const paths = usePaths();
     const { navigate } = useNavigate();
     const { data: session, isLoading: isLoadingSession } = useFetchSession();
     const { error: errorCreateAccount, isPending: isPendingCreateAccount, isSuccess, mutate: createAccount, } = useCreateAccount();
     const isExistingAccount = errorCreateAccount instanceof ExistingAccountError;
     const isDisabled = isSuccess || isExistingAccount;
-    const continuePath = returnUrl && returnUrl !== PATHS.ACCOUNT_CREATE ? returnUrl : PATHS.ACCOUNT;
-    const isReturnToShipping = returnUrl === PATHS.CHECKOUT_SHIPPING;
+    const continuePath = returnUrl && returnUrl !== paths.ACCOUNT_CREATE ? returnUrl : paths.ACCOUNT;
+    const isReturnToShipping = returnUrl === paths.CHECKOUT_SHIPPING;
     const onSubmit = ({ data }) => {
         createAccount(data, {
             onSuccess() {
@@ -39,7 +40,7 @@ function CreateAccountPage({ returnUrl } = {}) {
         navigate(continuePath, { reload: true });
         return;
     }
-    return (jsxs(Fragment, { children: [jsx(SignInPageLayout, { fullHeight: true, children: jsx(CreateAccountForm, { errorType: errorType, isDisabled: isDisabled, isPendingCreateAccount: isPendingCreateAccount, onSubmit: onSubmit }) }), jsx(Dialog, { footer: jsx(Button, { color: "primary", href: continuePath, route: { reload: true }, size: "md", withArrow: true, children: jsx(FormattedMessage, { id: "Continue" }) }), hasCloseButton: false, isDismissable: false, isKeyboardDismissDisabled: true, isOpen: isSuccess && !isReturnToShipping, title: "Account created", children: jsx("p", { children: jsx(FormattedMessage, { id: "Your new Sonic Equipment account was succesfully created. You should receive an email soon with further instructions on how to activate this account. If you do not receive this email, please contact Customer Support." }) }) }), jsx(Dialog, { footer: jsx(Button, { color: "primary", href: `${PATHS.SIGN_IN}${returnUrl ? `?returnUrl=${continuePath}` : ''}`, route: { reload: true }, size: "md", withArrow: true, children: jsx(FormattedMessage, { id: "Continue to sign in" }) }), hasCloseButton: false, isDismissable: false, isKeyboardDismissDisabled: true, isOpen: isExistingAccount, title: "Existing account", children: jsx("p", { children: jsx(FormattedMessage, { id: "The email address you entered is already associated with an existing account. Please sign in to this account or contact Customer Support." }) }) })] }));
+    return (jsxs(Fragment, { children: [jsx(SignInPageLayout, { fullHeight: true, children: jsx(CreateAccountForm, { errorType: errorType, isDisabled: isDisabled, isPendingCreateAccount: isPendingCreateAccount, onSubmit: onSubmit }) }), jsx(Dialog, { footer: jsx(Button, { color: "primary", href: continuePath, route: { reload: true }, size: "md", withArrow: true, children: jsx(FormattedMessage, { id: "Continue" }) }), hasCloseButton: false, isDismissable: false, isKeyboardDismissDisabled: true, isOpen: isSuccess && !isReturnToShipping, title: "Account created", children: jsx("p", { children: jsx(FormattedMessage, { id: "Your new Sonic Equipment account was succesfully created. You should receive an email soon with further instructions on how to activate this account. If you do not receive this email, please contact Customer Support." }) }) }), jsx(Dialog, { footer: jsx(Button, { color: "primary", href: `${paths.SIGN_IN}${returnUrl ? `?returnUrl=${continuePath}` : ''}`, route: { reload: true }, size: "md", withArrow: true, children: jsx(FormattedMessage, { id: "Continue to sign in" }) }), hasCloseButton: false, isDismissable: false, isKeyboardDismissDisabled: true, isOpen: isExistingAccount, title: "Existing account", children: jsx("p", { children: jsx(FormattedMessage, { id: "The email address you entered is already associated with an existing account. Please sign in to this account or contact Customer Support." }) }) })] }));
 }
 
 export { CreateAccountPage };

package/dist/pages/account/sign-in-page/sign-in-page.js

@@ -8,11 +8,12 @@ import { useSignIn } from '../../../shared/api/storefront/hooks/authentication/u
 import { isRequestError } from '../../../shared/fetch/request.js';
 import { useDisclosure } from '../../../shared/hooks/use-disclosure.js';
 import { useNavigate } from '../../../shared/routing/use-navigate.js';
-import { PATHS } from '../../paths.js';
+import { usePaths } from '../../../shared/routing/use-paths.js';
 import { SignInForm } from '../components/sign-in-form/sign-in-form.js';
 import { SignInPageLayout } from '../layouts/sign-in-page-layout/sign-in-page-layout.js';
 
 function SignInPage({ returnUrl } = {}) {
+    const paths = usePaths();
     const { navigate } = useNavigate();
     const [isSuccess, setIsSuccess] = useState(false);
     const { isOpen: isRecoverPasswordDialogOpen, setIsOpen: setRecoverPasswordDialogOpen, } = useDisclosure(false);
@@ -33,10 +34,10 @@ function SignInPage({ returnUrl } = {}) {
     }, [errorCreateGuest, errorSignIn]);
     const onSuccess = () => {
         setIsSuccess(true);
-        navigate(returnUrl || PATHS.HOME, { reload: true });
+        navigate(returnUrl || paths.HOME, { reload: true });
     };
-    const allowGuestSignIn = returnUrl === PATHS.CHECKOUT_SHIPPING;
-    const createAccountPath = `${PATHS.ACCOUNT_CREATE}${returnUrl ? `?returnUrl=${returnUrl}` : ''}`;
+    const allowGuestSignIn = returnUrl === paths.CHECKOUT_SHIPPING;
+    const createAccountPath = `${paths.ACCOUNT_CREATE}${returnUrl ? `?returnUrl=${returnUrl}` : ''}`;
     const onSubmit = ({ data }) => {
         resetSignIn();
         resetCreateGuest();

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

@@ -19,11 +19,12 @@ import { Button } from '../../../buttons/button/button.js';
 import { useFetchCurrentCartLinesWithAtp } from '../../../shared/api/storefront/hooks/cart/use-fetch-current-cart-lines-with-atp.js';
 import { useFetchCurrentCartWithAtp } from '../../../shared/api/storefront/hooks/cart/use-fetch-current-cart-with-atp.js';
 import { getCurrencyCodeBySymbol } from '../../../shared/model/currency.js';
+import { usePaths } from '../../../shared/routing/use-paths.js';
 import { ensureNumber } from '../../../shared/utils/number.js';
-import { PATHS } from '../../paths.js';
 import { EmptyCart } from './components/empty-cart-page.js';
 
 function CartContent({ cartLines }) {
+    const paths = usePaths();
     const { addToast } = useToast();
     const { data: currentCart } = useFetchCurrentCartWithAtp();
     const saveCartForLater = useSaveCartForLater({
@@ -84,7 +85,7 @@ function CartContent({ cartLines }) {
             primary: (jsx(Button, { withArrow: true, "data-test-selector": "checkoutShippingCartTotalContinueButton", href: "/CheckoutShipping", children: jsx(FormattedMessage, { id: "Start checkout" }) })),
             secondary: isAuthenticated ? (jsx(Button, { color: "secondary", "data-test-selector": "saveCartForLaterButton", onClick: () => {
                     saveCartForLater.mutate({ cart: currentCart });
-                }, variant: "outline", children: jsx(FormattedMessage, { id: "Save order" }) })) : (jsx(Button, { color: "secondary", "data-test-selector": "saveCartForLaterButton", href: PATHS.SIGN_IN, variant: "outline", children: jsx(FormattedMessage, { id: "Save order" }) })),
+                }, variant: "outline", children: jsx(FormattedMessage, { id: "Save order" }) })) : (jsx(Button, { color: "secondary", "data-test-selector": "saveCartForLaterButton", href: paths.SIGN_IN, variant: "outline", children: jsx(FormattedMessage, { id: "Save order" }) })),
         }, mobileSummary: jsx(CartTotalsSummary, { currencyCode: currencyCode, totalAmount: currentCart.orderGrandTotal }), overview: jsx(CartTotals, { currencyCode: currencyCode, shippingCost: currentCart.shippingAndHandling, subtotal: currentCart.orderSubTotal, tax: currentCart.totalTax, total: currentCart.orderGrandTotal, vatPercentage: cartLines[0]?.pricing?.vatRate || 0 }), children: jsx(OrderLineList, { onRemoveAll: () => deleteCurrentCart.mutate(), children: cartLines.map(cartLine => (jsx(ConnectedOrderLineCard, { deliveryDate: cartLine.atp?.date ?? null, href: cartLine.productUri, image: {
                     fit: 'contain',
                     image: {
@@ -102,6 +103,7 @@ function CartContent({ cartLines }) {
                 }, productId: cartLine.productId || '', sku: cartLine.erpNumber || '', tags: [cartLine.properties.label].filter(Boolean), title: cartLine.shortDescription }, cartLine.id))) }) }));
 }
 function CartPage() {
+    const paths = usePaths();
     const t = useFormattedMessage();
     const { data: cartLines, error, isLoading, } = useFetchCurrentCartLinesWithAtp();
     if (error)
@@ -109,9 +111,9 @@ function CartPage() {
     if (isLoading)
         return jsx(LoadingPage, {});
     return (jsx(Page, { breadcrumb: [
-            { href: PATHS.HOME, label: 'home' },
-            { href: PATHS.CART, label: t('Cart') },
-        ], canonicalUrl: PATHS.CART, "data-test-selector": "cartPage", title: t('Cart'), children: cartLines?.length ? (jsx(CartContent, { cartLines: cartLines })) : (jsx(EmptyCart, {})) }));
+            { href: paths.HOME, label: 'home' },
+            { href: paths.CART, label: t('Cart') },
+        ], canonicalUrl: paths.CART, "data-test-selector": "cartPage", title: t('Cart'), children: cartLines?.length ? (jsx(CartContent, { cartLines: cartLines })) : (jsx(EmptyCart, {})) }));
 }
 
 export { CartPage };

package/dist/pages/checkout/order-confirmation-page/order-confirmation-page-content.js

@@ -11,10 +11,10 @@ import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
 import { OrderLineList } from '../../../lists/orderline-list/orderline-list.js';
 import { useSaveCartForLater } from '../../../shared/api/storefront/hooks/cart/use-save-cart-for-later.js';
 import { getCurrencyCodeBySymbol } from '../../../shared/model/currency.js';
+import { usePaths } from '../../../shared/routing/use-paths.js';
 import { ensureNumber } from '../../../shared/utils/number.js';
 import { useToast } from '../../../toast/use-toast.js';
 import { Page } from '../../components/page/page.js';
-import { PATHS } from '../../paths.js';
 import { BillingAndInvoiceInformation } from '../components/billing-and-invoice-information.js';
 import { CheckoutPageLayout } from '../layouts/checkout-page-layout/checkout-page-layout.js';
 import { CheckoutPageSection } from '../layouts/checkout-page-layout/components/checkout-page-section.js';
@@ -23,6 +23,7 @@ import styles from './order-confirmation-page.module.css.js';
 
 function OrderConfirmationPageContent({ cart, }) {
     const t = useFormattedMessage();
+    const paths = usePaths();
     const { addToast } = useToast();
     const saveCartForLater = useSaveCartForLater({
         onError: () => {
@@ -44,9 +45,9 @@ function OrderConfirmationPageContent({ cart, }) {
     if (!currencyCode)
         throw new Error(`Currency code not found for symbol ${cart.currencySymbol}`);
     return (jsx(Page, { breadcrumb: [
-            { href: PATHS.HOME, label: t('Home') },
+            { href: paths.HOME, label: t('Home') },
             {
-                href: `${PATHS.ORDER_CONFIRMATION}?cartId=${cart.id}`,
+                href: `${paths.ORDER_CONFIRMATION}?cartId=${cart.id}`,
                 label: t('Order confirmation'),
             },
         ], "data-test-selector": "orderConfirmationPage", title: t('Order confirmation'), children: jsx(CheckoutPageLayout, { actions: {

package/dist/pages/checkout/order-confirmation-page/order-confirmation-page.js

@@ -5,12 +5,13 @@ import { LoadingPage } from '../../loading-page/loading-page.js';
 import { useIsAuthenticated } from '../../../shared/api/storefront/hooks/authentication/use-is-authenticated.js';
 import { useFetchCartById } from '../../../shared/api/storefront/hooks/cart/use-fetch-cart-by-id.js';
 import { useNavigate } from '../../../shared/routing/use-navigate.js';
+import { usePaths } from '../../../shared/routing/use-paths.js';
 import { hasNo } from '../../../shared/utils/types.js';
 import { ErrorPage } from '../../error-page/error-page.js';
-import { PATHS } from '../../paths.js';
 import { OrderConfirmationPageContent } from './order-confirmation-page-content.js';
 
 function OrderConfirmationPage({ cartId }) {
+    const paths = usePaths();
     const isAuthenticated = useIsAuthenticated();
     const { isNavigating, navigate } = useNavigate();
     const { data: cart, error, isLoading: cartIsLoading, } = useFetchCartById({
@@ -22,10 +23,10 @@ function OrderConfirmationPage({ cartId }) {
         if (isAuthenticated === undefined)
             return;
         if (!isAuthenticated)
-            return navigate(PATHS.CART);
+            return navigate(paths.CART);
         if (cart.status === 'Cart')
-            navigate(PATHS.CART);
-    }, [cart, navigate, isAuthenticated]);
+            navigate(paths.CART);
+    }, [cart, navigate, isAuthenticated, paths]);
     if (error)
         return jsx(ErrorPage, { error: error });
     if (cartIsLoading || isNavigating)

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

@@ -8,9 +8,9 @@ import { FormattedMessage } from '../../../intl/formatted-message.js';
 import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
 import { OrderLineList } from '../../../lists/orderline-list/orderline-list.js';
 import { getCurrencyCodeBySymbol } from '../../../shared/model/currency.js';
+import { usePaths } from '../../../shared/routing/use-paths.js';
 import { ensureNumber } from '../../../shared/utils/number.js';
 import { Page } from '../../components/page/page.js';
-import { PATHS } from '../../paths.js';
 import { CheckoutPageLayout } from '../layouts/checkout-page-layout/checkout-page-layout.js';
 import { CheckoutPageSection } from '../layouts/checkout-page-layout/components/checkout-page-section.js';
 import { CheckoutPageSectionContent } from '../layouts/checkout-page-layout/components/checkout-page-section-content.js';
@@ -18,13 +18,14 @@ import { Payment } from './components/payment.js';
 
 function PaymentPageContent({ atp, cart, formId, hasAtp, isProcessing, onPaymentComplete, setIsProcessing, }) {
     const t = useFormattedMessage();
+    const paths = usePaths();
     const currencyCode = getCurrencyCodeBySymbol(cart.currencySymbol);
     if (!currencyCode)
         throw new Error(`Currency code not found for symbol ${cart.currencySymbol}`);
     return (jsx(Page, { breadcrumb: [
-            { href: PATHS.HOME, label: t('Home') },
+            { href: paths.HOME, label: t('Home') },
             {
-                href: PATHS.REVIEW_AND_SUBMIT,
+                href: paths.REVIEW_AND_SUBMIT,
                 label: t('Review and payment'),
             },
         ], "data-test-selector": "paymentPage", title: t('Review and payment'), children: jsxs(CheckoutPageLayout, { actions: {

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

@@ -5,15 +5,16 @@ import { useIsAuthenticated } from '../../../shared/api/storefront/hooks/authent
 import { useFetchCurrentCheckoutAtp } from '../../../shared/api/storefront/hooks/cart/use-fetch-current-cart-checkout-atp.js';
 import { useFetchCurrentCartWithAtp } from '../../../shared/api/storefront/hooks/cart/use-fetch-current-cart-with-atp.js';
 import { useNavigate } from '../../../shared/routing/use-navigate.js';
+import { usePaths } from '../../../shared/routing/use-paths.js';
 import { hasNo } from '../../../shared/utils/types.js';
 import { ErrorPage } from '../../error-page/error-page.js';
 import { LoadingPage } from '../../loading-page/loading-page.js';
-import { PATHS } from '../../paths.js';
 import { useHasReturnedFromAdyen } from './hooks/use-has-returned-from-adyen.js';
 import { PaymentPageContent } from './payment-page-content.js';
 
 const PAYMENT_FORM_ID = 'paymentForm';
 function PaymentPage() {
+    const paths = usePaths();
     const hasReturnedFromAdyen = useHasReturnedFromAdyen();
     const isAuthenticated = useIsAuthenticated();
     const { data: cart, error, isLoading: isLoadingCart, } = useFetchCurrentCartWithAtp({
@@ -25,24 +26,24 @@ function PaymentPage() {
     const [isProcessing, setIsProcessing] = useState(false);
     const { isNavigating, navigate } = useNavigate();
     const onPaymentComplete = useCallback(({ cartId }) => {
-        navigate(`${PATHS.ORDER_CONFIRMATION}?cartId=${cartId}`);
-    }, [navigate]);
+        navigate(`${paths.ORDER_CONFIRMATION}?cartId=${cartId}`);
+    }, [navigate, paths]);
     useEffect(() => {
         if (isNavigating)
             return;
         if (isAuthenticated === undefined)
             return;
         if (!isAuthenticated)
-            return navigate(PATHS.CHECKOUT_SHIPPING_VIA_SIGNIN);
+            return navigate(paths.CHECKOUT_SHIPPING_VIA_SIGNIN);
         if (hasNo(cart))
             return;
         if (hasNo(cart.cartLines) || cart.cartLines.length === 0)
-            return navigate(PATHS.CART);
+            return navigate(paths.CART);
         if (hasNo(cart.billTo))
-            return navigate(PATHS.CHECKOUT_SHIPPING_VIA_SIGNIN);
+            return navigate(paths.CHECKOUT_SHIPPING_VIA_SIGNIN);
         if (hasNo(cart.billTo.address1))
-            return navigate(PATHS.CHECKOUT_SHIPPING);
-    }, [cart, navigate, isAuthenticated, isNavigating]);
+            return navigate(paths.CHECKOUT_SHIPPING);
+    }, [cart, navigate, isAuthenticated, isNavigating, paths]);
     if (error)
         return jsx(ErrorPage, { error: error });
     if (!isAtpLoading && !atp)

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

@@ -4,11 +4,12 @@ import { Link } from '../../../../buttons/link/link.js';
 import { FormattedMessage } from '../../../../intl/formatted-message.js';
 import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
 import { Dialog } from '../../../../modals/dialog/dialog.js';
-import { PATHS } from '../../../paths.js';
+import { usePaths } from '../../../../shared/routing/use-paths.js';
 
 function CurrencyChangeDialog({ isOpen, onOpenChange, onSubmit, }) {
     const t = useFormattedMessage();
-    return (jsx(Dialog, { "data-test-selector": "currencyChangeDialog", 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(Link, { 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." })] }) }));
+    const paths = usePaths();
+    return (jsx(Dialog, { "data-test-selector": "currencyChangeDialog", 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(Link, { 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/readonly-address.js

@@ -7,7 +7,7 @@ import { Checkbox } from '../../../../forms/elements/checkbox/checkbox.js';
 import { TextField } from '../../../../forms/fields/text-field/text-field.js';
 import { FormattedMessage } from '../../../../intl/formatted-message.js';
 import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
-import { PATHS } from '../../../paths.js';
+import { usePaths } from '../../../../shared/routing/use-paths.js';
 import { CheckoutPageSection } from '../../layouts/checkout-page-layout/components/checkout-page-section.js';
 import { CheckoutPageSectionContent } from '../../layouts/checkout-page-layout/components/checkout-page-section-content.js';
 import { CheckoutPageSectionLink } from '../../layouts/checkout-page-layout/components/checkout-page-section-link.js';
@@ -17,6 +17,7 @@ import styles from './readonly-address.module.css.js';
 
 function ReadOnlyAddresses({ billTo, isLoading, isPickup, notes, onSubmit, shipTo, }) {
     const t = useFormattedMessage();
+    const paths = usePaths();
     return (jsxs(Form, { id: EDIT_ADDRESS_FORM_ID, onSubmit: e => {
             e.preventDefault();
             const formData = new FormData(e.currentTarget);
@@ -25,7 +26,7 @@ function ReadOnlyAddresses({ billTo, isLoading, isPickup, notes, onSubmit, shipT
                     ? undefined
                     : formData.get('notes')?.toString() || '',
             });
-        }, children: [jsxs(CheckoutPageSection, { title: jsx(FormattedMessage, { id: "Billing address" }), children: [jsx(CheckoutPageSectionLink, { children: jsxs(Link, { color: "secondary", href: PATHS.ACCOUNT_ADDRESSES, isDisabled: isLoading, children: [jsx(FormattedMessage, { id: "Edit billing address" }), " >"] }) }), jsxs(CheckoutPageSectionContent, { children: [billTo && (jsx(AddressInfoDisplay, { address: {
+        }, children: [jsxs(CheckoutPageSection, { title: jsx(FormattedMessage, { id: "Billing address" }), children: [jsx(CheckoutPageSectionLink, { children: jsxs(Link, { 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,
@@ -38,7 +39,7 @@ function ReadOnlyAddresses({ billTo, isLoading, isPickup, notes, onSubmit, shipT
                                     lastName: billTo.lastName,
                                     phone: billTo.phone,
                                     postalCode: billTo.postalCode,
-                                }, "data-test-selector": "billToAddress" })), 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(Link, { 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: {
+                                }, "data-test-selector": "billToAddress" })), 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(Link, { 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/shipping-page-content.js

@@ -7,8 +7,8 @@ import { Select } from '../../../forms/elements/select/select.js';
 import { FormattedMessage } from '../../../intl/formatted-message.js';
 import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
 import { getCurrencyCodeBySymbol } from '../../../shared/model/currency.js';
+import { usePaths } from '../../../shared/routing/use-paths.js';
 import { Page } from '../../components/page/page.js';
-import { PATHS } from '../../paths.js';
 import { CheckoutPageLayout } from '../layouts/checkout-page-layout/checkout-page-layout.js';
 import { CheckoutPageSection } from '../layouts/checkout-page-layout/components/checkout-page-section.js';
 import { CheckoutPageSectionContent } from '../layouts/checkout-page-layout/components/checkout-page-section-content.js';
@@ -17,6 +17,7 @@ import styles from './shipping-page.module.css.js';
 
 function ShippingPageContent({ cart, editAddress, errorPatchBillingAddress, fulfillmentMethods, isGuest, isLoadingFulfillmentMethods, isPatching, isPatchingSession, onChangeFulfillmentMethod, readOnlyAddress, }) {
     const t = useFormattedMessage();
+    const paths = usePaths();
     const fulfillmentMethodOptions = fulfillmentMethods?.reduce((acc, method) => ({
         ...acc,
         [method]: t(`fulfillmentmethod.${method}`),
@@ -26,9 +27,9 @@ function ShippingPageContent({ cart, editAddress, errorPatchBillingAddress, fulf
     if (!currencyCode)
         throw new Error(`Currency code not found for symbol ${cart.currencySymbol}`);
     return (jsx(Page, { breadcrumb: [
-            { href: PATHS.HOME, label: t('Home') },
+            { href: paths.HOME, label: t('Home') },
             {
-                href: PATHS.CHECKOUT_SHIPPING,
+                href: paths.CHECKOUT_SHIPPING,
                 label: t('Shipping details'),
             },
         ], "data-test-selector": "shippingPage", title: t('Shipping details'), children: jsxs(CheckoutPageLayout, { actions: {

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

@@ -9,10 +9,10 @@ import { useFetchFulfillmentMethodsForCurrentCart } from '../../../shared/api/st
 import { useDataLayer } from '../../../shared/ga/use-data-layer.js';
 import { useDisclosure } from '../../../shared/hooks/use-disclosure.js';
 import { useNavigate } from '../../../shared/routing/use-navigate.js';
+import { usePaths } from '../../../shared/routing/use-paths.js';
 import { hasNo } from '../../../shared/utils/types.js';
 import { ErrorPage } from '../../error-page/error-page.js';
 import { LoadingPage } from '../../loading-page/loading-page.js';
-import { PATHS } from '../../paths.js';
 import { CurrencyChangeDialog } from './components/currency-change-dialog.js';
 import { EditCheckoutBillToAddressForm } from './components/edit-checkout-bill-to-address-form.js';
 import { ReadOnlyAddresses } from './components/readonly-address.js';
@@ -20,6 +20,7 @@ import { usePatchShippingDetails } from './hooks/use-patch-shipping-details.js';
 import { ShippingPageContent } from './shipping-page-content.js';
 
 function ShippingPage() {
+    const paths = usePaths();
     const { createEcommerceEvent, dataLayer } = useDataLayer();
     const gaEventPushed = useRef(false);
     const { data: cart, error: errorFetchCart, isLoading: isLoadingCart, refetch: refetchCart, } = useFetchCurrentCart();
@@ -48,14 +49,14 @@ function ShippingPage() {
         if (isAuthenticated === undefined)
             return;
         if (!isAuthenticated)
-            return navigate(PATHS.CHECKOUT_SHIPPING_VIA_SIGNIN);
+            return navigate(paths.CHECKOUT_SHIPPING_VIA_SIGNIN);
         if (hasNo(cart))
             return;
         if (hasNo(cart.cartLines) || cart.cartLines.length === 0)
-            return navigate(PATHS.CART);
+            return navigate(paths.CART);
         if (hasNo(cart.billTo))
-            return navigate(PATHS.CHECKOUT_SHIPPING_VIA_SIGNIN);
-    }, [cart, navigate, isAuthenticated, isNavigating]);
+            return navigate(paths.CHECKOUT_SHIPPING_VIA_SIGNIN);
+    }, [cart, navigate, isAuthenticated, isNavigating, paths]);
     useEffect(() => {
         /* Guards for when the bill to address is saved and we should navigate to the next page */
         if (isPatching)
@@ -68,8 +69,8 @@ function ShippingPage() {
             return location?.reload();
         if (hasNo(cart?.billTo?.address1))
             return;
-        return navigate(PATHS.REVIEW_AND_SUBMIT);
-    }, [isSuccess, cart, navigate, isNavigating, isPatching, isError]);
+        return navigate(paths.REVIEW_AND_SUBMIT);
+    }, [isSuccess, cart, paths, navigate, isNavigating, isPatching, isError]);
     useEffect(() => {
         if (!cart || gaEventPushed.current)
             return;
@@ -157,7 +158,7 @@ function ShippingPage() {
                 if (!cart.billTo)
                     return;
                 if (notes === undefined) {
-                    navigate(PATHS.REVIEW_AND_SUBMIT);
+                    navigate(paths.REVIEW_AND_SUBMIT);
                 }
                 else {
                     await patchShippingDetails({ cart, notes });

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

@@ -3,18 +3,19 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useEffect } from 'react';
 import { logger } from '../../logging/logger.js';
 import { isRequestError } from '../../shared/fetch/request.js';
+import { usePaths } from '../../shared/routing/use-paths.js';
 import { environment } from '../../shared/utils/environment.js';
 import { Heading } from '../../typography/heading/heading.js';
 import { Page } from '../components/page/page.js';
-import { PATHS } from '../paths.js';
 
 function ErrorPage({ error }) {
+    const paths = usePaths();
     useEffect(() => {
         logger.error('ErrorPage error:', error);
     }, [error]);
     return (jsx(Page, { breadcrumb: [
-            { href: PATHS.HOME, label: 'Home' },
-            { href: PATHS.HOME, label: 'Error' },
+            { href: paths.HOME, label: 'Home' },
+            { href: paths.HOME, label: 'Error' },
         ], "data-test-selector": "errorPage", title: "Something went wrong", children: environment !== 'production' && (jsxs(Fragment, { children: [jsx(Heading, { size: "l", children: isRequestError(error) ? (jsxs(Fragment, { children: [error.status, " - ", error.statusText || 'Unknown error'] })) : (jsx(Fragment, { children: error.message })) }), isRequestError(error) && (jsxs(Fragment, { children: [jsx(Heading, { size: "xs", children: "Error details" }), jsx(Heading, { size: "xxs", children: "Body" }), jsx("pre", { children: JSON.stringify(error.body, null, 2) }), jsx(Heading, { size: "xxs", children: "Options" }), jsx("pre", { children: JSON.stringify(error.options, null, 2) })] }))] })) }));
 }
 

package/dist/pages/my-sonic/actions/change-password/connected-change-password-dialog.js

@@ -3,11 +3,12 @@ import { FormattedMessage } from '../../../../intl/formatted-message.js';
 import { useFetchCurrentAccount } from '../../../../shared/api/storefront/hooks/account/use-fetch-current-account.js';
 import { usePatchSession } from '../../../../shared/api/storefront/hooks/authentication/use-patch-session.js';
 import { useNavigate } from '../../../../shared/routing/use-navigate.js';
+import { usePaths } from '../../../../shared/routing/use-paths.js';
 import { useToast } from '../../../../toast/use-toast.js';
-import { PATHS } from '../../../paths.js';
 import { ChangePasswordDialog } from './change-password-dialog.js';
 
 function ConnectedChangePasswordDialog({ isOpen, onClose, }) {
+    const paths = usePaths();
     const { error: errorPatchSession, isLoading: isUpdating, mutate: patchSession, } = usePatchSession();
     const { addToast } = useToast();
     const { navigate } = useNavigate();
@@ -30,7 +31,7 @@ function ConnectedChangePasswordDialog({ isOpen, onClose, }) {
                 messageType: 'success',
             });
             onClose();
-            navigate(`${PATHS.SIGN_IN}${location?.pathname ? `?returnUrl=${encodeURIComponent(location.pathname + location.search)}` : ''}`);
+            navigate(`${paths.SIGN_IN}${location?.pathname ? `?returnUrl=${encodeURIComponent(location.pathname + location.search)}` : ''}`);
         }, username: account?.email }));
 }
 

package/dist/pages/my-sonic/navigation/connected-my-sonic-navigation.js

@@ -5,12 +5,13 @@ import { logger } from '../../../logging/logger.js';
 import { useSignOut } from '../../../shared/api/storefront/hooks/authentication/use-sign-out.js';
 import { useLocation } from '../../../shared/routing/use-location.js';
 import { useNavigate } from '../../../shared/routing/use-navigate.js';
-import { PATHS } from '../../paths.js';
+import { usePaths } from '../../../shared/routing/use-paths.js';
 import { MySonicDesktopNavigation } from './my-sonic-desktop-navigation.js';
 import { MySonicMobileNavigation } from './my-sonic-mobile-navigation.js';
 import styles from './connected-my-sonic-navigation.module.css.js';
 
 function ConnectedMySonicNavigation() {
+    const paths = usePaths();
     const { pathname } = useLocation();
     const { navigate } = useNavigate();
     const { mutate } = useSignOut({
@@ -18,7 +19,7 @@ function ConnectedMySonicNavigation() {
         onSuccess: () => {
             // TODO: Remove when Spire is deprecated
             Cookies.remove('NavigationMode');
-            navigate(PATHS.HOME, { reload: true });
+            navigate(paths.HOME, { reload: true });
         },
     });
     return (jsxs("div", { style: { display: 'grid' }, children: [jsx(MySonicDesktopNavigation, { className: styles['large'], currentPath: pathname, onLogout: mutate }), jsx(MySonicMobileNavigation, { className: styles['small'], currentPath: pathname, onLogout: mutate })] }));

package/dist/pages/my-sonic/navigation/my-sonic-desktop-navigation.js

@@ -2,10 +2,11 @@ import { jsx } from 'react/jsx-runtime';
 import { FormattedMessage } from '../../../intl/formatted-message.js';
 import { MenuList } from '../../../lists/menu-list/menu-list.js';
 import { MenuListItem } from '../../../lists/menu-list/menu-list-item.js';
-import { mySonicNavigationItems } from './my-sonic-navigation-items.js';
+import { useMySonicNavigationItems } from './my-sonic-navigation-items.js';
 import styles from './my-sonic-desktop-navigation.module.css.js';
 
 function MySonicDesktopNavigation({ className, currentPath, onLogout, }) {
+    const mySonicNavigationItems = useMySonicNavigationItems();
     return (jsx(MenuList, { collapsible: true, className: className, children: mySonicNavigationItems.map(item => (jsx(MenuListItem, { badge: jsx(item.Icon, {}), ...(item.type === 'action'
                 ? item.action === 'logout'
                     ? { onClick: onLogout }

package/dist/pages/my-sonic/navigation/my-sonic-mobile-navigation.js

@@ -3,9 +3,10 @@ import { jsx } from 'react/jsx-runtime';
 import { Select } from '../../../forms/elements/select/select.js';
 import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
 import { useNavigate } from '../../../shared/routing/use-navigate.js';
-import { mySonicNavigationItems } from './my-sonic-navigation-items.js';
+import { useMySonicNavigationItems } from './my-sonic-navigation-items.js';
 
 function MySonicMobileNavigation({ className, currentPath, onLogout, }) {
+    const mySonicNavigationItems = useMySonicNavigationItems();
     const { navigate } = useNavigate();
     const t = useFormattedMessage();
     return (jsx(Select, { className: className, label: t('Navigate to...'), onChange: option => {

package/dist/pages/my-sonic/navigation/my-sonic-navigation-items.d.ts

@@ -14,5 +14,5 @@ interface MySonicNavigationAction extends MySonicNavigationItemBase {
     type: 'action';
 }
 type MySonicNavigationItem = MySonicNavigationLink | MySonicNavigationAction;
-export declare const mySonicNavigationItems: MySonicNavigationItem[];
+export declare function useMySonicNavigationItems(): MySonicNavigationItem[];
 export {};

package/dist/pages/my-sonic/navigation/my-sonic-navigation-items.js

@@ -2,28 +2,36 @@ import { SolidCartIcon } from '../../../icons/solid/solid-cart-icon.js';
 import { SolidFavoriteIcon } from '../../../icons/solid/solid-favorite-icon.js';
 import { SolidLoginIcon } from '../../../icons/solid/solid-login-icon.js';
 import { SolidLogOutIcon } from '../../../icons/solid/solid-logout-icon.js';
-import { PATHS } from '../../paths.js';
+import { usePaths } from '../../../shared/routing/use-paths.js';
 
-const mySonicNavigationItems = [
-    {
-        Icon: SolidLoginIcon,
-        label: 'Account',
-        path: PATHS.ACCOUNT_SETTINGS.toLowerCase(),
-        type: 'link',
-    },
-    {
-        Icon: SolidFavoriteIcon,
-        label: 'Favorites',
-        path: PATHS.ACCOUNT_MY_LISTS.toLowerCase(),
-        type: 'link',
-    },
-    {
-        Icon: SolidCartIcon,
-        label: 'Orders',
-        path: PATHS.ACCOUNT_ORDERS.toLowerCase(),
-        type: 'link',
-    },
-    { Icon: SolidLogOutIcon, action: 'logout', label: 'Log out', type: 'action' },
-];
+function useMySonicNavigationItems() {
+    const paths = usePaths();
+    return [
+        {
+            Icon: SolidLoginIcon,
+            label: 'Account',
+            path: paths.ACCOUNT_SETTINGS.toLowerCase(),
+            type: 'link',
+        },
+        {
+            Icon: SolidFavoriteIcon,
+            label: 'Favorites',
+            path: paths.ACCOUNT_MY_LISTS.toLowerCase(),
+            type: 'link',
+        },
+        {
+            Icon: SolidCartIcon,
+            label: 'Orders',
+            path: paths.ACCOUNT_ORDERS.toLowerCase(),
+            type: 'link',
+        },
+        {
+            Icon: SolidLogOutIcon,
+            action: 'logout',
+            label: 'Log out',
+            type: 'action',
+        },
+    ];
+}
 
-export { mySonicNavigationItems };
+export { useMySonicNavigationItems };

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

@@ -1,13 +1,14 @@
 import { ElementType, ReactNode } from 'react';
-import { NavigateFunction, RouteLinkElementProps } from './types';
+import { NavigateFunction, Paths, RouteLinkElementProps } from './types';
 export interface RouteProviderProps {
     Link?: ElementType<RouteLinkElementProps>;
     children: ReactNode;
     navigate: NavigateFunction;
+    paths: Paths;
     url: {
         basePathname?: string;
         pathname: string;
         search: string;
     };
 }
-export declare function RouteProvider({ children, Link, navigate, url, }: RouteProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function RouteProvider({ children, Link, navigate, paths, url, }: RouteProviderProps): import("react/jsx-runtime").JSX.Element;

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

@@ -3,10 +3,11 @@ import { jsx, Fragment } from 'react/jsx-runtime';
 import { useGlobalState } from '../providers/global-state-provider.js';
 import { withRouting } from './with-routing.js';
 
-function RouteProvider({ children, Link = FallbackRouteLink, navigate, url, }) {
+function RouteProvider({ children, Link = FallbackRouteLink, navigate, paths, url, }) {
     useGlobalState('routing', {
         Link,
         navigate,
+        paths,
         url,
     });
     return jsx(Fragment, { children: children });

package/dist/shared/routing/types.d.ts

@@ -1,7 +1,25 @@
 import { ElementType } from 'react';
+export interface Paths {
+    ACCOUNT: string;
+    ACCOUNT_ADDRESSES: string;
+    ACCOUNT_CREATE: string;
+    ACCOUNT_INVOICES: string;
+    ACCOUNT_MY_LISTS: string;
+    ACCOUNT_ORDERS: string;
+    ACCOUNT_SETTINGS: string;
+    CART: string;
+    CHECKOUT_SHIPPING: string;
+    CHECKOUT_SHIPPING_VIA_SIGNIN: string;
+    FAVORITES: string;
+    HOME: string;
+    ORDER_CONFIRMATION: string;
+    REVIEW_AND_SUBMIT: string;
+    SIGN_IN: string;
+}
 export interface RouteContext {
     Link?: ElementType<RouteLinkElementProps>;
     navigate: NavigateFunction;
+    paths: Paths;
     url: {
         basePathname?: string;
         pathname: string;

package/dist/shared/routing/use-paths.d.ts

@@ -0,0 +1,2 @@
+import { Paths } from './types';
+export declare function usePaths(): Paths;

package/dist/shared/routing/use-paths.js

@@ -0,0 +1,10 @@
+import { useGlobalState } from '../providers/global-state-provider.js';
+
+function usePaths() {
+    const [routeState] = useGlobalState('routing');
+    if (!routeState)
+        throw new Error('usePaths must be used within a RouteProvider context');
+    return routeState.paths;
+}
+
+export { usePaths };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonic-equipment/ui",
-  "version": "192.0.0",
+  "version": "194.0.0",
   "type": "module",
   "license": "MIT",
   "engines": {
@@ -145,8 +145,8 @@
     "instantsearch.js": "4.78.3",
     "js-cookie": "3.0.5",
     "query-string": "9.2.0",
-    "react-aria": "3.40.0",
-    "react-aria-components": "1.9.0",
+    "react-aria": "3.42.0",
+    "react-aria-components": "1.11.0",
     "react-instantsearch": "7.15.8",
     "react-toastify": "10.0.6",
     "react-transition-group": "4.4.5",

package/dist/pages/paths.d.ts

@@ -1,17 +0,0 @@
-export declare const PATHS: {
-    readonly ACCOUNT: "/MyAccount";
-    readonly ACCOUNT_ADDRESSES: "/MyAccount/Addresses";
-    readonly ACCOUNT_CREATE: "/MyAccount/CreateAccount";
-    readonly ACCOUNT_INVOICES: "/MyAccount/Invoices";
-    readonly ACCOUNT_MY_LISTS: "/MyAccount/MyLists";
-    readonly ACCOUNT_ORDERS: "/MyAccount/Orders";
-    readonly ACCOUNT_SETTINGS: "/MyAccount/AccountSettings";
-    readonly CART: "/Cart";
-    readonly CHECKOUT_SHIPPING: "/CheckoutShipping";
-    readonly CHECKOUT_SHIPPING_VIA_SIGNIN: "/SignIn?returnUrl=/CheckoutShipping";
-    readonly FAVORITES: "/MyAccount/MyLists";
-    readonly HOME: "/";
-    readonly ORDER_CONFIRMATION: "/OrderConfirmation";
-    readonly REVIEW_AND_SUBMIT: "/CheckoutReviewAndSubmit";
-    readonly SIGN_IN: "/SignIn";
-};

package/dist/pages/paths.js

@@ -1,19 +0,0 @@
-const PATHS = {
-    ACCOUNT: '/MyAccount',
-    ACCOUNT_ADDRESSES: '/MyAccount/Addresses',
-    ACCOUNT_CREATE: '/MyAccount/CreateAccount',
-    ACCOUNT_INVOICES: '/MyAccount/Invoices',
-    ACCOUNT_MY_LISTS: '/MyAccount/MyLists',
-    ACCOUNT_ORDERS: '/MyAccount/Orders',
-    ACCOUNT_SETTINGS: '/MyAccount/AccountSettings',
-    CART: '/Cart',
-    CHECKOUT_SHIPPING: '/CheckoutShipping',
-    CHECKOUT_SHIPPING_VIA_SIGNIN: '/SignIn?returnUrl=/CheckoutShipping',
-    FAVORITES: '/MyAccount/MyLists',
-    HOME: '/',
-    ORDER_CONFIRMATION: '/OrderConfirmation',
-    REVIEW_AND_SUBMIT: '/CheckoutReviewAndSubmit',
-    SIGN_IN: '/SignIn',
-};
-
-export { PATHS };