@sonic-equipment/ui 193.0.0 → 195.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/forms/partials/edit-address-form/edit-address-form.d.ts

@@ -3,6 +3,7 @@ import { Country } from '../../../shared/model/countries-languages';
 export interface EditAddressFormProps {
     address: Address | null | undefined;
     countries: Country[];
+    currentCountry: Country | undefined;
     isLoading: boolean;
 }
-export declare function EditAddressForm({ address, countries, isLoading, }: EditAddressFormProps): import("react/jsx-runtime").JSX.Element;
+export declare function EditAddressForm({ address, countries, currentCountry: _currentCountry, isLoading, }: EditAddressFormProps): import("react/jsx-runtime").JSX.Element;

package/dist/forms/partials/edit-address-form/edit-address-form.js

@@ -9,17 +9,18 @@ import { Message } from '../../../message/message.js';
 import { validatePhone, validateEmail } from '../../../shared/model/address.js';
 import styles from './edit-address-form.module.css.js';
 
-function EditAddressForm({ address, countries, isLoading, }) {
+function EditAddressForm({ address, countries, currentCountry: _currentCountry, isLoading, }) {
     const t = useFormattedMessage();
     const [companyName, setCompanyName] = useState(address?.companyName || '');
     const [lastName, setLastName] = useState(address?.lastName || '');
-    const currentCountry = countries.find(country => country.id === address?.country?.id);
+    const currentCountry = countries.find(c => c.id === address?.country?.id) || _currentCountry;
     const [selectedCountry, setSelectedCountry] = useState(currentCountry);
-    const currencyHasChanged = selectedCountry?.currencyCode !== currentCountry?.currencyCode;
+    const currencyHasChanged = Boolean(currentCountry) &&
+        selectedCountry?.currencyCode !== currentCountry?.currencyCode;
     if (countries.length === 0) {
         return (jsx(Message, { type: "danger", children: jsx(FormattedMessage, { force: true, id: "No countries available. Unable to change address." }) }));
     }
-    return (jsxs(Fragment, { children: [jsx(TextField, { defaultValue: address?.firstName, isDisabled: isLoading, label: t('First name'), name: "firstName", showLabel: true }), jsx(TextField, { isDisabled: isLoading, isRequired: !address?.companyName, label: t('Last name'), minLength: 3, name: "lastName", onChange: setLastName, showLabel: true, value: lastName }, `lastname-${Boolean(address?.companyName)}`), jsx(TextField, { defaultValue: address?.companyName, isDisabled: isLoading, label: t('Company name'), name: "companyName", onChange: setCompanyName, showLabel: true, value: companyName }), jsx(TextField, { defaultValue: address?.attention, isDisabled: isLoading, label: t('Attention'), name: "attention", showLabel: true }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { isRequired: true, defaultValue: address?.address1, isDisabled: isLoading, label: `${t('Address')} 1`, maxLength: 30, minLength: 3, name: "address1", showLabel: true }) }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { defaultValue: address?.address2, isDisabled: isLoading, label: `${t('Address')} 2`, maxLength: 30, minLength: 3, name: "address2", showLabel: true }) }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { defaultValue: address?.address3, isDisabled: isLoading, label: `${t('Address')} 3`, maxLength: 30, minLength: 3, name: "address3", showLabel: true }) }), jsx(TextField, { isRequired: true, defaultValue: address?.postalCode, isDisabled: isLoading, label: t('Postal Code'), maxLength: 10, minLength: 4, name: "postalCode", showLabel: true }), jsx(TextField, { isRequired: true, defaultValue: address?.city, isDisabled: isLoading, label: t('City'), maxLength: 30, minLength: 3, name: "city", showLabel: true }), jsxs("div", { className: styles['span-2'], children: [jsx(CountrySelect, { isRequired: true, countries: countries, "data-test-selector": "countrySelect", isDisabled: isLoading, name: "countrySelect", onCountryChange: setSelectedCountry, selectedCountry: selectedCountry }), currencyHasChanged && (jsx(Message, { className: styles['currency-warning'], type: "warning", children: jsx(FormattedMessage, { id: "Selecting this country will result in your cart to be converted to the currency {0}", replacementValues: {
+    return (jsxs(Fragment, { children: [jsx(TextField, { defaultValue: address?.firstName, isDisabled: isLoading, label: t('First name'), name: "firstName", showLabel: true }), jsx(TextField, { isDisabled: isLoading, isRequired: !companyName, label: t('Last name'), minLength: 3, name: "lastName", onChange: setLastName, showLabel: true, value: lastName }, `lastname-${Boolean(companyName)}`), jsx(TextField, { defaultValue: address?.companyName, isDisabled: isLoading, label: t('Company name'), name: "companyName", onChange: setCompanyName, showLabel: true, value: companyName }), jsx(TextField, { defaultValue: address?.attention, isDisabled: isLoading, label: t('Attention'), name: "attention", showLabel: true }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { isRequired: true, defaultValue: address?.address1, isDisabled: isLoading, label: `${t('Address')} 1`, maxLength: 30, minLength: 3, name: "address1", showLabel: true }) }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { defaultValue: address?.address2, isDisabled: isLoading, label: `${t('Address')} 2`, maxLength: 30, minLength: 3, name: "address2", showLabel: true }) }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { defaultValue: address?.address3, isDisabled: isLoading, label: `${t('Address')} 3`, maxLength: 30, minLength: 3, name: "address3", showLabel: true }) }), jsx(TextField, { isRequired: true, defaultValue: address?.postalCode, isDisabled: isLoading, label: t('Postal Code'), maxLength: 10, minLength: 4, name: "postalCode", showLabel: true }), jsx(TextField, { isRequired: true, defaultValue: address?.city, isDisabled: isLoading, label: t('City'), maxLength: 30, minLength: 3, name: "city", showLabel: true }), jsxs("div", { className: styles['span-2'], children: [jsx(CountrySelect, { isRequired: true, countries: countries, "data-test-selector": "countrySelect", isDisabled: isLoading, name: "countrySelect", onCountryChange: setSelectedCountry, selectedCountry: selectedCountry }), currencyHasChanged && (jsx(Message, { className: styles['currency-warning'], type: "warning", children: jsx(FormattedMessage, { id: "Selecting this country will result in your cart to be converted to the currency {0}", replacementValues: {
                                 '0': selectedCountry?.currencyCode || t('Unknown'),
                             } }) }))] }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { isRequired: true, defaultValue: address?.phone, isDisabled: isLoading, label: t('Phone'), name: "phone", showLabel: true, validate: value => {
                         if (!value)

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';
@@ -361,7 +360,7 @@ export { fetchTranslations } from './shared/api/storefront/services/translation-
 export { fetchCountriesLanguages, fetchCountriesWithLanguages, fetchSettings, updateLocale } from './shared/api/storefront/services/website-service.js';
 export { WishListNameAlreadyExistsError, addWishListItemToWishList, createWishList, deleteWishList, deleteWishListItemFromWishList, getWishList, getWishListItemsByWishListId, getWishLists } from './shared/api/storefront/services/wishlist-service.js';
 export { cart } from './shared/data/cart.data.js';
-export { countries, dutch, english, france, french, german, germany, languages, netherlands, unitedKingdom } from './shared/data/countries-languages.data.js';
+export { countries, dutch, english, france, french, german, germany, languages, netherlands, switzerland, unitedKingdom } from './shared/data/countries-languages.data.js';
 export { navigationData } from './shared/data/navigation.js';
 export { useFeatureFlags } from './shared/feature-flags/use-feature-flags.js';
 export { BadRequestError, ForbiddenRequestError, InternalServerErrorRequestError, NotFoundRequestError, RequestError, TimeoutRequestError, UnauthorizedRequestError, UnprocessableContentRequestError, isFormData, isJsonBody, isRequestError, request } from './shared/fetch/request.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/edit-checkout-bill-to-address-form.d.ts

@@ -6,9 +6,10 @@ export interface EditAddressesFormData {
     address: ValidAddress;
     notes: string | undefined;
 }
-export declare function EditCheckoutBillToAddressForm({ billTo, countries, isLoading, isPickup, onSubmit, }: {
+export declare function EditCheckoutBillToAddressForm({ billTo, countries, currentCountry, isLoading, isPickup, onSubmit, }: {
     billTo: BillToModel | undefined | null;
     countries: Country[];
+    currentCountry: Country | undefined;
     isLoading: boolean;
     isPickup: boolean;
     onSubmit: (event: EditAddressesFormData) => void;

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

@@ -14,7 +14,7 @@ import { SonicAddress } from './sonic-address.js';
 import styles from './edit-checkout-bill-to-address-form.module.css.js';
 
 const EDIT_ADDRESS_FORM_ID = 'billToForm';
-function EditCheckoutBillToAddressForm({ billTo, countries, isLoading, isPickup, onSubmit, }) {
+function EditCheckoutBillToAddressForm({ billTo, countries, currentCountry, isLoading, isPickup, onSubmit, }) {
     const t = useFormattedMessage();
     const { data: cart } = useFetchCurrentCart();
     return (jsxs(Fragment, { children: [jsx(CheckoutPageSection, { title: jsx(FormattedMessage, { id: "Billing address" }), children: jsx(CheckoutPageSectionContent, { children: jsxs(Form, { className: styles.form, "data-test-selector": "billToAddressForm", id: EDIT_ADDRESS_FORM_ID, onSubmit: e => {
@@ -43,7 +43,7 @@ function EditCheckoutBillToAddressForm({ billTo, countries, isLoading, isPickup,
                                     ? undefined
                                     : formData.get('notes')?.toString() || '',
                             });
-                        }, children: [jsx(EditAddressForm, { address: billTo, countries: countries, isLoading: isLoading }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { defaultValue: cart?.notes, isDisabled: isLoading, isMultiline: true, label: t('Add order notes'), name: "notes", rows: 3, showLabel: true }) })] }) }) }), jsx(CheckoutPageSection, { title: jsx(FormattedMessage, { id: isPickup ? 'Pickup address' : 'Shipping address' }), children: jsx(CheckoutPageSectionContent, { children: jsx(Fragment, { children: isPickup ? (jsx(SonicAddress, {})) : (jsxs("div", { className: styles['use-invoice-checkbox'], children: [jsx(Checkbox, { "data-test-selector": "checkboxUseBillingAddress", isDisabled: true, isSelected: true, children: jsx(FormattedMessage, { id: "Use billing address" }) }), jsx(InfoIconTooltip, { variant: "stroke", children: t('Changing your address is currently not possible. Please contact customer support to change your address.') })] })) }) }) })] }));
+                        }, children: [jsx(EditAddressForm, { address: billTo, countries: countries, currentCountry: currentCountry, isLoading: isLoading }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { defaultValue: cart?.notes, isDisabled: isLoading, isMultiline: true, label: t('Add order notes'), name: "notes", rows: 3, showLabel: true }) })] }) }) }), jsx(CheckoutPageSection, { title: jsx(FormattedMessage, { id: isPickup ? 'Pickup address' : 'Shipping address' }), children: jsx(CheckoutPageSectionContent, { children: jsx(Fragment, { children: isPickup ? (jsx(SonicAddress, {})) : (jsxs("div", { className: styles['use-invoice-checkbox'], children: [jsx(Checkbox, { "data-test-selector": "checkboxUseBillingAddress", isDisabled: true, isSelected: true, children: jsx(FormattedMessage, { id: "Use billing address" }) }), jsx(InfoIconTooltip, { variant: "stroke", children: t('Changing your address is currently not possible. Please contact customer support to change your address.') })] })) }) }) })] }));
 }
 
 export { EDIT_ADDRESS_FORM_ID, EditCheckoutBillToAddressForm };

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;
@@ -123,7 +124,7 @@ function ShippingPage() {
     return (jsx(ShippingPageContent, { cart: cart, 
         // TODO: Combine editAddress and readOnlyAddress into one section in order
         // for typescript to correctly infer which properties are set in what case
-        editAddress: jsxs(Fragment, { children: [jsx(EditCheckoutBillToAddressForm, { billTo: cart.billTo, countries: countries || [], isLoading: isPatching, isPickup: isPickup, onSubmit: async ({ address, notes }) => {
+        editAddress: jsxs(Fragment, { children: [jsx(EditCheckoutBillToAddressForm, { billTo: cart.billTo, countries: countries || [], currentCountry: currentCountry, isLoading: isPatching, isPickup: isPickup, onSubmit: async ({ address, notes }) => {
                         if (!cart.billTo)
                             return;
                         formData.current = { address, notes };
@@ -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/actions/edit-bill-to-address/edit-bill-to-address.js

@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import { EditAddressForm } from '../../../../forms/partials/edit-address-form/edit-address-form.js';
 
 function EditBillToAddress() {
-    return (jsx(EditAddressForm, { address: undefined, countries: [], isLoading: false }));
+    return (jsx(EditAddressForm, { address: undefined, countries: [], currentCountry: undefined, isLoading: false }));
 }
 
 export { EditBillToAddress };

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/data/countries-languages.data.d.ts

@@ -6,6 +6,7 @@ export declare const german: Language;
 export declare const netherlands: Country;
 export declare const unitedKingdom: Country;
 export declare const germany: Country;
+export declare const switzerland: Country;
 export declare const france: Country;
 export declare const countries: Country[];
 export declare const languages: Language[];

package/dist/shared/data/countries-languages.data.js

@@ -46,6 +46,14 @@ const germany = {
     name: 'Germany',
     states: null,
 };
+const switzerland = {
+    abbreviation: 'CH',
+    currencyCode: 'CHF',
+    id: '423f6a9b-0b7b-4b3b-8b3b-3b7b0b9a6f46',
+    languages: [german, french],
+    name: 'Switserland',
+    states: null,
+};
 const france = {
     abbreviation: 'FR',
     currencyCode: 'EUR',
@@ -57,9 +65,10 @@ const france = {
 const countries = [
     netherlands,
     unitedKingdom,
+    switzerland,
     germany,
     france,
 ];
 const languages = [english, dutch, french, german];
 
-export { countries, dutch, english, france, french, german, germany, languages, netherlands, unitedKingdom };
+export { countries, dutch, english, france, french, german, germany, languages, netherlands, switzerland, unitedKingdom };

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": "193.0.0",
+  "version": "195.0.0",
   "type": "module",
   "license": "MIT",
   "engines": {

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 };