@sonic-equipment/ui 138.0.0 → 140.0.0

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

@@ -7,10 +7,11 @@ export interface AccordionItemProps {
     borderType?: BorderType | BorderType[];
     children: ReactNode;
     className?: string;
+    'data-test-selector'?: string;
     id: string;
     initialIsOpen?: boolean;
     isDisabled?: boolean;
     size?: 'md' | 'lg';
     title: ReactNode;
 }
-export declare function AccordionItem({ _pseudo, allowCollapse, allowToggle, borderType, children, className, id, initialIsOpen, isDisabled, size, title, }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function AccordionItem({ _pseudo, allowCollapse, allowToggle, borderType, children, className, 'data-test-selector': dataTestSelector, id, initialIsOpen, isDisabled, size, title, }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;

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

@@ -8,7 +8,7 @@ import { useDisclosure } from '../../shared/hooks/use-disclosure.js';
 import { ensureArray } from '../../shared/utils/array.js';
 import styles from './accordion.module.css.js';
 
-function AccordionItem({ _pseudo = 'none', allowCollapse = true, allowToggle = true, borderType = 'bottom', children, className, id, initialIsOpen = false, isDisabled = false, size, title, }) {
+function AccordionItem({ _pseudo = 'none', allowCollapse = true, allowToggle = true, borderType = 'bottom', children, className, 'data-test-selector': dataTestSelector, id, initialIsOpen = false, isDisabled = false, size, title, }) {
     const { close, isOpen, open, toggle } = useDisclosure(initialIsOpen);
     useEffect(() => {
         if (initialIsOpen) {
@@ -22,7 +22,7 @@ function AccordionItem({ _pseudo = 'none', allowCollapse = true, allowToggle = t
     return (jsxs("div", { className: clsx(className, ...ensureArray(borderType).map(type => styles[`border-type-${type}`]), styles['accordion-item'], isDisabled && styles.disabled, {
             [styles['is-open']]: isOpen,
             [styles['allow-toggle']]: allowToggle,
-        }), children: [jsx("h3", { children: allowCollapse ? (jsxs("button", { "aria-controls": panelId, "aria-expanded": isOpen, className: clsx(styles.button, styles[_pseudo]), disabled: isDisabled, id: id, onClick: () => {
+        }), "data-test-selector": dataTestSelector, children: [jsx("h3", { children: allowCollapse ? (jsxs("button", { "aria-controls": panelId, "aria-expanded": isOpen, className: clsx(styles.button, styles[_pseudo]), disabled: isDisabled, id: id, onClick: () => {
                         if (allowToggle)
                             toggle();
                     }, type: "button", children: [title, jsx("span", { className: styles.icon, children: size === 'lg' ? (jsx(GlyphsChevronsBoldDownIcon, {})) : (jsx(GlyphsChevronsSlimDownIcon, {})) })] })) : (jsx("span", { className: styles.button, children: title })) }), jsx("div", { "aria-labelledby": id, className: styles.panel, id: panelId, role: "region", children: jsx("div", { className: styles.content, children: children }) })] }));

package/dist/exports.d.ts

@@ -167,7 +167,7 @@ export * from './pages/checkout/payment-page/hooks/use-has-returned-from-adyen';
 export * from './pages/checkout/payment-page/payment-page';
 export * from './pages/checkout/payment-page/payment-page-content';
 export * from './pages/checkout/payment-page/utils/parse-amount';
-export * from './pages/checkout/shipping-page/components/edit-address';
+export * from './pages/checkout/shipping-page/components/edit-address-form';
 export * from './pages/checkout/shipping-page/components/readonly-address';
 export * from './pages/checkout/shipping-page/components/sonic-address';
 export * from './pages/checkout/shipping-page/hooks/use-patch-shipping-details';
@@ -293,6 +293,10 @@ export * from './shared/routing/route-button';
 export * from './shared/routing/route-icon-button';
 export * from './shared/routing/route-link';
 export * from './shared/routing/route-provider';
+export * from './shared/routing/types';
+export * from './shared/routing/use-base-path';
+export * from './shared/routing/use-navigate';
+export * from './shared/routing/use-on-navigate';
 export * from './shared/routing/with-routing';
 export * from './shared/utils/array';
 export * from './shared/utils/breakpoints';

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

@@ -4,7 +4,7 @@ import { useEffect, useRef } from 'react';
 import { Transition, TransitionGroup } from 'react-transition-group';
 import clsx from 'clsx';
 import { useAlgoliaSearch } from '../algolia/use-algolia-search.js';
-import { useOnNavigate } from '../shared/routing/route-provider.js';
+import { useOnNavigate } from '../shared/routing/use-on-navigate.js';
 import { useGlobalSearchDisclosure } from './global-search-provider/use-search-disclosure.js';
 import { ConnectedSearchInput } from './search-input/connected-search-input.js';
 import { SearchResultPanel } from './search-result-panel/search-result-panel.js';

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

@@ -2,7 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { useAlgoliaSearch } from '../../algolia/use-algolia-search.js';
 import { useFormattedMessage } from '../../intl/use-formatted-message.js';
-import { useNavigate } from '../../shared/routing/route-provider.js';
+import { useNavigate } from '../../shared/routing/use-navigate.js';
 import { useGlobalSearchDisclosure } from '../global-search-provider/use-search-disclosure.js';
 import { SearchInput } from './search-input.js';
 

package/dist/index.js

@@ -170,7 +170,7 @@ export { useHasReturnedFromAdyen } from './pages/checkout/payment-page/hooks/use
 export { PaymentPage } from './pages/checkout/payment-page/payment-page.js';
 export { PaymentPageContent } from './pages/checkout/payment-page/payment-page-content.js';
 export { parseAmount } from './pages/checkout/payment-page/utils/parse-amount.js';
-export { EDIT_ADDRESS_FORM_ID, EditAddresses } from './pages/checkout/shipping-page/components/edit-address.js';
+export { EDIT_ADDRESS_FORM_ID, EditAddressesForm } from './pages/checkout/shipping-page/components/edit-address-form.js';
 export { ReadOnlyAddresses } from './pages/checkout/shipping-page/components/readonly-address.js';
 export { SonicAddress } from './pages/checkout/shipping-page/components/sonic-address.js';
 export { usePatchShippingDetails } from './pages/checkout/shipping-page/hooks/use-patch-shipping-details.js';
@@ -261,7 +261,7 @@ export { WishListNameAlreadyExistsError, addWishListItemToWishList, createWishLi
 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';
 export { dataLayer } from './shared/ga/data-layer.js';
-export { GoogleAnalyticsProvider, useGoogleAnalyticsProvider } from './shared/ga/google-analytics-provider.js';
+export { GoogleAnalyticsProvider, InitializeGoogleAnalyticsProvider, useGoogleAnalyticsProvider } from './shared/ga/google-analytics-provider.js';
 export { isGAEvent } from './shared/ga/types.js';
 export { useDataLayer } from './shared/ga/use-data-layer.js';
 export { useBreakpoint } from './shared/hooks/use-breakpoint.js';
@@ -292,7 +292,10 @@ export { ReactQueryContainer } from './shared/providers/react-query-container.js
 export { RouteButton } from './shared/routing/route-button.js';
 export { RouteIconButton } from './shared/routing/route-icon-button.js';
 export { RouteLink } from './shared/routing/route-link.js';
-export { RouteProvider, useBasePath, useNavigate, useOnNavigate } from './shared/routing/route-provider.js';
+export { RouteProvider } from './shared/routing/route-provider.js';
+export { useBasePath } from './shared/routing/use-base-path.js';
+export { useNavigate } from './shared/routing/use-navigate.js';
+export { useOnNavigate } from './shared/routing/use-on-navigate.js';
 export { withRouting } from './shared/routing/with-routing.js';
 export { ensureArray } from './shared/utils/array.js';
 export { breakpoints, getCurrentBreakpoints } from './shared/utils/breakpoints.js';

package/dist/media/image/image.js

@@ -34,20 +34,30 @@ function createSrcSet(image) {
         .filter(Boolean)
         .join(', ') || undefined);
 }
+function getPrimarySrc(image) {
+    if (image === undefined)
+        return undefined;
+    if (isResponsiveImage(image)) {
+        return (getPrimarySrc(image.sm) ||
+            getPrimarySrc(image.md) ||
+            getPrimarySrc(image.lg));
+    }
+    return image[3] || image[2] || image[1];
+}
 function ImageComponent({ className, fallbackSrc, fit = 'cover', hasError, image, ...rest }) {
-    if (!image)
+    if (!image || (!image[1] && !image[2] && !image[3]))
         return (jsx("img", { alt: "Missing", className: clsx(styles.image, className, styles[fit], styles['has-error']), src: fallbackSrc, ...rest }));
     const srcSet = hasError ? undefined : createSrcSet(image);
     return (jsx("img", { alt: image.altText, className: clsx(styles.image, className, styles[fit], {
             [styles['has-error']]: hasError,
-        }), src: fallbackSrc, srcSet: srcSet, ...rest }));
+        }), src: hasError ? fallbackSrc : getPrimarySrc(image), srcSet: srcSet, ...rest }));
 }
 function PictureComponent({ className, fallbackSrc, fit = 'cover', hasError, image, ...rest }) {
-    if (!image)
+    if (!image || (!image.sm && !image.md && !image.lg))
         return (jsx("picture", { className: clsx(styles.picture, className), children: jsx("img", { alt: "Missing", className: clsx(styles.image, styles[fit], styles['has-error']), src: fallbackSrc, ...rest }) }));
     return (jsxs("picture", { className: clsx(styles.picture, className), children: [image.sm && (jsx("source", { media: "(max-width: 768px)", srcSet: createSrcSet(image.sm) })), image.md && (jsx("source", { media: "(max-width: 1439px)", srcSet: createSrcSet(image.md) })), image.lg && (jsx("source", { media: "(min-width: 1440px)", srcSet: createSrcSet(image.lg) })), jsx("img", { alt: image.altText, className: clsx(styles.image, styles[fit], {
                     [styles['has-error']]: hasError,
-                }), src: fallbackSrc, ...rest })] }));
+                }), src: hasError ? fallbackSrc : getPrimarySrc(image), ...rest })] }));
 }
 
 export { Image };

package/dist/modals/dialog/dialog.js

@@ -11,10 +11,10 @@ import { Modal } from '../modal/modal.js';
 import styles from './dialog.module.css.js';
 
 function Footer({ cancelLabel, close, submitLabel }) {
-    return (jsxs(Fragment, { children: [jsx(Button, { withArrow: true, color: "primary", size: "md", type: "submit", children: jsx(FormattedMessage, { id: submitLabel }) }), jsx(Button, { color: "secondary", onClick: close, size: "md", variant: "outline", children: jsx(FormattedMessage, { id: cancelLabel }) })] }));
+    return (jsxs(Fragment, { children: [jsx(Button, { withArrow: true, color: "primary", "data-test-selector": "dialogSubmit", size: "md", type: "submit", children: jsx(FormattedMessage, { id: submitLabel }) }), jsx(Button, { color: "secondary", "data-test-selector": "dialogCancel", onClick: close, size: "md", variant: "outline", children: jsx(FormattedMessage, { id: cancelLabel }) })] }));
 }
 function Dialog({ allowClose = true, cancelLabel = 'Close', children, className, footer = Footer, hasCloseButton = true, hideTitle, isDismissable, isFullScreen, isKeyboardDismissDisabled, isOpen, onOpenChange, onSubmit, shouldCloseOnInteractOutside, submitLabel = 'Submit', title, validationErrors, }) {
-    return (jsx(Modal, { className: clsx(styles['modal-overlay'], typeof className === 'string' ? className : className?.modal), hasCloseButton: false, isDismissable: isDismissable, isFullScreen: isFullScreen, isKeyboardDismissDisabled: isKeyboardDismissDisabled, isOpen: isOpen, onOpenChange: onOpenChange, shouldCloseOnInteractOutside: shouldCloseOnInteractOutside, children: jsx(Dialog$1, { "aria-label": title, className: clsx(styles.dialog, typeof className === 'string' ? undefined : className?.dialog), children: ({ close }) => (jsxs(Form, { className: clsx(styles.form, typeof className === 'string' ? undefined : className?.form), onSubmit: e => {
+    return (jsx(Modal, { className: clsx(styles['modal-overlay'], typeof className === 'string' ? className : className?.modal), hasCloseButton: false, isDismissable: isDismissable, isFullScreen: isFullScreen, isKeyboardDismissDisabled: isKeyboardDismissDisabled, isOpen: isOpen, onOpenChange: onOpenChange, shouldCloseOnInteractOutside: shouldCloseOnInteractOutside, children: jsx(Dialog$1, { "aria-label": title, className: clsx(styles.dialog, typeof className === 'string' ? undefined : className?.dialog), "data-test-selector": "dialog", children: ({ close }) => (jsxs(Form, { className: clsx(styles.form, typeof className === 'string' ? undefined : className?.form), onSubmit: e => {
                     e.preventDefault();
                     e.stopPropagation();
                     onSubmit?.(e);

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

@@ -1,10 +1,10 @@
 import { jsx } from 'react/jsx-runtime';
-import { useMemo } from 'react';
+import { useState, useMemo } from 'react';
 import { useCreateGuestAccount } from '../../../shared/api/storefront/hooks/authentication/use-create-guest-account.js';
 import { useFetchSession } from '../../../shared/api/storefront/hooks/authentication/use-fetch-session.js';
 import { useSignIn } from '../../../shared/api/storefront/hooks/authentication/use-sign-in.js';
 import { isRequestError } from '../../../shared/fetch/request.js';
-import { useNavigate } from '../../../shared/routing/route-provider.js';
+import { useNavigate } from '../../../shared/routing/use-navigate.js';
 import { SignInForm } from '../../../sign-in-form/sign-in-form.js';
 import { Page } from '../../components/page/page.js';
 import { PATHS } from '../../paths.js';
@@ -19,6 +19,7 @@ const IMAGE = {
 };
 function SignInPage({ returnUrl } = {}) {
     const { navigate } = useNavigate();
+    const [isSuccess, setIsSuccess] = useState(false);
     const { data: session } = useFetchSession();
     const { error: errorSignIn, isPending: isPendingSignIn, mutate: signIn, reset: resetSignIn, } = useSignIn();
     const { error: errorCreateGuest, isPending: isPendingCreateGuest, mutate: createGuest, reset: resetCreateGuest, } = useCreateGuestAccount();
@@ -28,11 +29,16 @@ function SignInPage({ returnUrl } = {}) {
             return undefined;
         if (errorCreateGuest)
             return 'Unexpected error';
-        if (isRequestError(error) && error.status === 403)
+        if (isRequestError(error) &&
+            error.status === 400 &&
+            error.body?.error === 'invalid_grant')
             return 'Access denied';
         return 'Unexpected error';
     }, [errorCreateGuest, errorSignIn]);
-    const onSuccess = () => navigate(returnUrl || PATHS.ACCOUNT);
+    const onSuccess = () => {
+        setIsSuccess(true);
+        navigate(returnUrl || PATHS.ACCOUNT, { reload: true });
+    };
     const allowGuestSignIn = returnUrl === PATHS.CHECKOUT_SHIPPING;
     const onSubmit = ({ data }) => {
         resetSignIn();
@@ -50,7 +56,7 @@ function SignInPage({ returnUrl } = {}) {
             }, { onSuccess });
         }
     };
-    return (jsx(Page, { fullHeight: true, fluid: true, children: jsx(SignInPageLayout, { fullHeight: true, image: IMAGE, children: jsx(SignInForm, { allowGuestSignIn: allowGuestSignIn, errorMessage: errorMessage, initialEmail: session?.isGuest ? '' : session?.email, initialRememberMe: session?.rememberMe, isDisabled: !session, isPendingGuestSignIn: isPendingCreateGuest, isPendingUserSignIn: isPendingSignIn, onSubmit: onSubmit }) }) }));
+    return (jsx(Page, { fullHeight: true, fluid: true, children: jsx(SignInPageLayout, { fullHeight: true, image: IMAGE, children: jsx(SignInForm, { allowGuestSignIn: allowGuestSignIn, errorMessage: errorMessage, initialEmail: session?.isGuest ? '' : session?.email, initialRememberMe: session?.rememberMe, isDisabled: !session || isSuccess, isPendingGuestSignIn: isPendingCreateGuest, isPendingUserSignIn: isPendingSignIn, onSubmit: onSubmit }) }) }));
 }
 
 export { SignInPage };

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

@@ -3,7 +3,7 @@ import { useEffect } from 'react';
 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/route-provider.js';
+import { useNavigate } from '../../../shared/routing/use-navigate.js';
 import { hasNo } from '../../../shared/utils/types.js';
 import { ErrorPage } from '../../error-page/error-page.js';
 import { PATHS } from '../../paths.js';

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

@@ -166,6 +166,7 @@ function Payment({ atp, cart: _cart, form, isProcessing, isValidatingVAT, onErro
                             },
                             requestedDeliveryDate: formData.get('deliveryDate')?.toString(),
                         },
+                        forceRecalculation: false,
                     });
                 }
                 catch (error) {
@@ -273,7 +274,7 @@ function Payment({ atp, cart: _cart, form, isProcessing, isValidatingVAT, onErro
                 /* eslint-disable ssr-friendly/no-dom-globals-in-react-fc */
                 typeof window === 'undefined'
                     ? ''
-                    : `${window.location.pathname}${window.location.search}` })), Boolean(paymentError) && (jsx("div", { className: styles['error-message'], children: jsx(FormattedMessage, { id: "An error occurred while processing your payment. Please try again." }) })), jsx(InfoDisplay, { id: "shipping-and-invoice-information", label: t('Billing and shipping address'), value: jsx(Accordion, { variant: "select", children: jsx(AccordionItem, { id: "invoice-and-shipping", isDisabled: isDisabled, title: "Factuur- en verzendinformatie", children: jsx(BillingAndInvoiceInformation, { billToAddress: {
+                    : `${window.location.pathname}${window.location.search}` })), Boolean(paymentError) && (jsx("div", { className: styles['error-message'], children: jsx(FormattedMessage, { id: "An error occurred while processing your payment. Please try again." }) })), jsx(InfoDisplay, { id: "shipping-and-invoice-information", label: t('Billing and shipping address'), value: jsx(Accordion, { variant: "select", children: jsx(AccordionItem, { "data-test-selector": "billingAndShippingInformation", id: "invoice-and-shipping", isDisabled: isDisabled, title: t('Billing and shipping information'), children: jsx(BillingAndInvoiceInformation, { billToAddress: {
                                 address1: cart.billTo?.address1,
                                 address2: cart.billTo?.address2,
                                 address3: cart.billTo?.address3,

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

@@ -3,7 +3,7 @@ import { useState, useCallback, useEffect } from 'react';
 import { useIsAuthenticated } from '../../../shared/api/storefront/hooks/authentication/use-is-authenticated.js';
 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/route-provider.js';
+import { useNavigate } from '../../../shared/routing/use-navigate.js';
 import { hasNo } from '../../../shared/utils/types.js';
 import { ErrorPage } from '../../error-page/error-page.js';
 import { LoadingPage } from '../../loading-page/loading-page.js';

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

@@ -14,7 +14,7 @@ interface Address {
     phone: string;
     postalCode: string;
 }
-export declare function EditAddresses({ billTo, countries, isLoading, isPickup, onSubmit, }: {
+export declare function EditAddressesForm({ billTo, countries, isLoading, isPickup, onSubmit, }: {
     billTo: BillToModel | undefined | null;
     countries: CountryModel[];
     isLoading: boolean;

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

@@ -12,10 +12,10 @@ import { validatePhone, validateEmail } from '../../../../shared/model/address.j
 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 { SonicAddress } from './sonic-address.js';
-import styles from './edit-address.module.css.js';
+import styles from './edit-address-form.module.css.js';
 
 const EDIT_ADDRESS_FORM_ID = 'billToForm';
-function EditAddresses({ billTo, countries, isLoading, isPickup, onSubmit, }) {
+function EditAddressesForm({ billTo, countries, isLoading, isPickup, onSubmit, }) {
     const t = useFormattedMessage();
     const [companyName, setCompanyName] = useState(billTo?.companyName || '');
     const [lastName, setLastName] = useState(billTo?.lastName || '');
@@ -57,4 +57,4 @@ function EditAddresses({ billTo, countries, isLoading, isPickup, onSubmit, }) {
                                     } }) }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { defaultValue: cart?.notes, isDisabled: isLoading, isMultiline: true, label: t('Add order notes'), name: "notes", rows: 3, showLabel: true }) })] }) }) }), jsx(CheckoutPageSection, { title: jsx(FormattedMessage, { id: isPickup ? 'Pickup address' : 'Shipping address' }), children: jsx(CheckoutPageSectionContent, { children: jsx(Fragment, { children: isPickup ? (jsx(SonicAddress, {})) : (jsxs("div", { className: styles['use-invoice-checkbox'], children: [jsx(Checkbox, { "data-test-selector": "checkboxUseBillingAddress", isDisabled: true, isSelected: true, children: jsx(FormattedMessage, { id: "Use billing address" }) }), jsx(InfoIconTooltip, { variant: "stroke", children: t('Changing your address is currently not possible. Please contact customer support to change your address.') })] })) }) }) })] }));
 }
 
-export { EDIT_ADDRESS_FORM_ID, EditAddresses };
+export { EDIT_ADDRESS_FORM_ID, EditAddressesForm };

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

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

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

@@ -10,7 +10,7 @@ import { PATHS } from '../../../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';
-import { EDIT_ADDRESS_FORM_ID } from './edit-address.js';
+import { EDIT_ADDRESS_FORM_ID } from './edit-address-form.js';
 import { SonicAddress } from './sonic-address.js';
 import styles from './readonly-address.module.css.js';
 

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

@@ -11,7 +11,7 @@ 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';
-import { EDIT_ADDRESS_FORM_ID } from './components/edit-address.js';
+import { EDIT_ADDRESS_FORM_ID } from './components/edit-address-form.js';
 import styles from './shipping-page.module.css.js';
 
 function ShippingPageContent({ cart, editAddress, errorPatchBillingAddress, fulfillmentMethods, isGuest, isLoadingFulfillmentMethods, isPatching, isPatchingSession, onChangeFulfillmentMethod, readOnlyAddress, }) {

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

@@ -6,12 +6,12 @@ import { useFetchCurrentCart } from '../../../shared/api/storefront/hooks/cart/u
 import { useFetchFulfillmentMethodsForCurrentCart } from '../../../shared/api/storefront/hooks/customer/use-fetch-fulfillment-methods-for-current-cart.js';
 import { useFetchCountries } from '../../../shared/api/storefront/hooks/website/use-fetch-countries.js';
 import { useDataLayer } from '../../../shared/ga/use-data-layer.js';
-import { useNavigate } from '../../../shared/routing/route-provider.js';
+import { useNavigate } from '../../../shared/routing/use-navigate.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 { EditAddresses } from './components/edit-address.js';
+import { EditAddressesForm } from './components/edit-address-form.js';
 import { ReadOnlyAddresses } from './components/readonly-address.js';
 import { usePatchShippingDetails } from './hooks/use-patch-shipping-details.js';
 import { ShippingPageContent } from './shipping-page-content.js';
@@ -81,7 +81,7 @@ function ShippingPage() {
         hasNo(cart.billTo) ||
         (hasNo(cart.billTo.address1) && hasNo(countries)))
         return null;
-    return (jsx(ShippingPageContent, { cart: cart, editAddress: jsx(EditAddresses, { billTo: cart.billTo, countries: countries || [], isLoading: isPatching, isPickup: isPickup, onSubmit: async ({ address, notes }) => {
+    return (jsx(ShippingPageContent, { cart: cart, editAddress: jsx(EditAddressesForm, { billTo: cart.billTo, countries: countries || [], isLoading: isPatching, isPickup: isPickup, onSubmit: async ({ address, notes }) => {
                 if (!cart.billTo)
                     return;
                 await patchShippingDetails({

package/dist/pages/paths.d.ts

@@ -1,5 +1,5 @@
 export declare const PATHS: {
-    readonly ACCOUNT: "/account";
+    readonly ACCOUNT: "/MyAccount";
     readonly ACCOUNT_ADDRESSES: "/MyAccount/Addresses";
     readonly CART: "/cart";
     readonly CHECKOUT_SHIPPING: "/CheckoutShipping";

package/dist/pages/paths.js

@@ -1,5 +1,5 @@
 const PATHS = {
-    ACCOUNT: '/account',
+    ACCOUNT: '/MyAccount',
     ACCOUNT_ADDRESSES: '/MyAccount/Addresses',
     CART: '/cart',
     CHECKOUT_SHIPPING: '/CheckoutShipping',

package/dist/shared/api/storefront/hooks/authentication/use-create-guest-account.js

@@ -25,9 +25,9 @@ function useCreateGuestAccount() {
                 });
                 return body;
             }
-            finally {
+            catch (error) {
                 queryClient.resetQueries();
-                queryClient.clear();
+                throw error;
             }
         },
     });

package/dist/shared/api/storefront/hooks/authentication/use-sign-in.js

@@ -1,4 +1,5 @@
 import { useQueryClient, useMutation } from '@tanstack/react-query';
+import { isRequestError } from '../../../../fetch/request.js';
 import { signIn, createSession } from '../../services/authentication-service.js';
 
 function useSignIn() {
@@ -16,8 +17,13 @@ function useSignIn() {
                 });
                 return body;
             }
-            finally {
-                queryClient.resetQueries();
+            catch (error) {
+                if (!(isRequestError(error) &&
+                    error.status === 400 &&
+                    error.body?.error === 'invalid_grant')) {
+                    queryClient.resetQueries();
+                }
+                throw error;
             }
         },
     });

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

@@ -5,5 +5,6 @@ export declare function usePatchCart(): {
     isSuccess: boolean;
     mutate: (args_0: {
         cart: import("../../model/storefront.model").PatchCartModel;
+        forceRecalculation?: boolean;
     }) => Promise<import("../../model/storefront.model").CartModel>;
 };

package/dist/shared/api/storefront/services/cart-service.d.ts

@@ -12,8 +12,9 @@ export declare function patchCartLineById({ cartLine, cartLineId, }: {
     cartLine: CartLineModel;
     cartLineId: string;
 }): Promise<void>;
-export declare function patchCart({ cart, }: {
+export declare function patchCart({ cart, forceRecalculation, }: {
     cart: PatchCartModel;
+    forceRecalculation?: boolean;
 }): Promise<CartModel>;
 export declare function deleteCurrentCart(): Promise<CartModel>;
 export declare function deleteCartLineById({ cartLineId, }: {

package/dist/shared/api/storefront/services/cart-service.js

@@ -36,7 +36,7 @@ async function patchCartLineById({ cartLine, cartLineId, }) {
         url: `${config.SHOP_API_URL}/api/v1/carts/current/cartlines/${cartLineId}`,
     });
 }
-async function patchCart({ cart, }) {
+async function patchCart({ cart, forceRecalculation = true, }) {
     const { body } = await request({
         body: cart,
         credentials: 'include',
@@ -44,7 +44,7 @@ async function patchCart({ cart, }) {
             'Content-Type': 'application/json',
         },
         method: 'PATCH',
-        url: `${config.BFF_API_URL}/api/v1/carts/current`,
+        url: `${config.BFF_API_URL}/api/v1/carts/current${forceRecalculation ? '?forceRecalculation=true' : ''}`,
     });
     return body;
 }

package/dist/shared/ga/google-analytics-provider.d.ts

@@ -1,8 +1,9 @@
 import { ReactNode } from 'react';
 export declare function useGoogleAnalyticsProvider(): {
     customerNumber: string | undefined;
-    isFetching: boolean;
+    isLoading: boolean;
 };
+export declare function InitializeGoogleAnalyticsProvider(): null;
 export declare function GoogleAnalyticsProvider({ children }?: {
     children?: ReactNode;
 }): JSX.Element | null;

package/dist/shared/ga/google-analytics-provider.js

@@ -1,16 +1,17 @@
 "use client";
-import { jsx, Fragment } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useFetchSession } from '../api/storefront/hooks/authentication/use-fetch-session.js';
 
 function useGoogleAnalyticsProvider() {
-    const { data: session, isFetching } = useFetchSession();
-    return { customerNumber: session?.billTo?.customerNumber, isFetching };
+    const { data: session, isLoading } = useFetchSession();
+    return { customerNumber: session?.billTo?.customerNumber, isLoading };
+}
+function InitializeGoogleAnalyticsProvider() {
+    useGoogleAnalyticsProvider();
+    return null;
 }
 function GoogleAnalyticsProvider({ children = null } = { children: null }) {
-    const { isFetching } = useGoogleAnalyticsProvider();
-    if (isFetching)
-        return null;
-    return jsx(Fragment, { children: children });
+    return (jsxs(Fragment, { children: [jsx(InitializeGoogleAnalyticsProvider, {}), children] }));
 }
 
-export { GoogleAnalyticsProvider, useGoogleAnalyticsProvider };
+export { GoogleAnalyticsProvider, InitializeGoogleAnalyticsProvider, useGoogleAnalyticsProvider };

package/dist/shared/model/image.d.ts

@@ -23,4 +23,4 @@ export interface ResponsiveImageType {
     md?: DPRSrcSet;
     sm?: DPRSrcSet;
 }
-export declare function isResponsiveImage(image: ImageType | ResponsiveImageType | undefined): image is ResponsiveImageType;
+export declare function isResponsiveImage(image: unknown): image is ResponsiveImageType;

package/dist/shared/model/image.js

@@ -1,5 +1,7 @@
 function isResponsiveImage(image) {
-    return Boolean(image?.lg);
+    return Boolean(image?.lg ||
+        image?.md ||
+        image?.sm);
 }
 
 export { isResponsiveImage };

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

@@ -1,23 +1,8 @@
 import { ReactNode } from 'react';
-export interface NavigateOptions {
-    prefetch?: boolean;
-    replace?: boolean;
-}
-export type NavigateFn = (href: string, options?: NavigateOptions) => void;
-export interface UseNavigateReturnType {
-    isNavigating: boolean;
-    navigate: NavigateFn;
-}
-export interface RouteContext {
-    basePath?: string;
-    navigate: NavigateFn;
-}
+import { NavigateFunction } from './types';
 export interface RouteProviderProps {
     basePath?: string;
     children: ReactNode;
-    navigate: NavigateFn;
+    navigate: NavigateFunction;
 }
 export declare function RouteProvider({ basePath, children, navigate, }: RouteProviderProps): import("react/jsx-runtime").JSX.Element;
-export declare function useOnNavigate(callback?: NavigateFn): NavigateFn;
-export declare function useNavigate(): UseNavigateReturnType;
-export declare function useBasePath(): string | undefined;

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

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

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

@@ -0,0 +1,10 @@
+export interface RouteContext {
+    basePath?: string;
+    navigate: NavigateFunction;
+}
+export interface NavigateOptions {
+    prefetch?: boolean;
+    reload?: boolean;
+    replace?: boolean;
+}
+export type NavigateFunction = (href: string, options?: NavigateOptions) => void;

package/dist/shared/routing/use-base-path.d.ts

@@ -0,0 +1 @@
+export declare function useBasePath(): string | undefined;

package/dist/shared/routing/use-base-path.js

@@ -0,0 +1,12 @@
+"use client";
+import { useGlobalState } from '../providers/global-state-provider.js';
+
+function useBasePath() {
+    const [state] = useGlobalState('routing');
+    if (!state) {
+        throw new Error('RouteProvider not found');
+    }
+    return state.basePath;
+}
+
+export { useBasePath };

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

@@ -0,0 +1,6 @@
+import { NavigateFunction } from './types';
+export interface UseNavigateReturnType {
+    isNavigating: boolean;
+    navigate: NavigateFunction;
+}
+export declare function useNavigate(): UseNavigateReturnType;

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

@@ -0,0 +1,23 @@
+"use client";
+import { useRef, useCallback } from 'react';
+import { useGlobalState } from '../providers/global-state-provider.js';
+import { useOnNavigate } from './use-on-navigate.js';
+
+function useNavigate() {
+    const isNavigatingRef = useRef(false);
+    const [state] = useGlobalState('routing');
+    const trigger = useOnNavigate(() => {
+        isNavigatingRef.current = false;
+    });
+    if (!state) {
+        throw new Error('RouteProvider not found');
+    }
+    const navigate = useCallback((href, options) => {
+        trigger(href, options);
+        isNavigatingRef.current = true;
+        return state.navigate(href, options);
+    }, [state, trigger]);
+    return { isNavigating: isNavigatingRef.current, navigate };
+}
+
+export { useNavigate };

package/dist/shared/routing/use-on-navigate.d.ts

@@ -0,0 +1,2 @@
+import { NavigateFunction } from './types';
+export declare function useOnNavigate(callback?: NavigateFunction): NavigateFunction;

package/dist/shared/routing/use-on-navigate.js

@@ -0,0 +1,19 @@
+"use client";
+import { useEffect, useCallback } from 'react';
+
+const onNavigateCallbacks = [];
+function useOnNavigate(callback) {
+    useEffect(() => {
+        if (!callback)
+            return;
+        onNavigateCallbacks.push(callback);
+        return () => {
+            onNavigateCallbacks.splice(onNavigateCallbacks.indexOf(callback), 1);
+        };
+    }, [callback]);
+    return useCallback((href, options) => {
+        onNavigateCallbacks.forEach(cb => cb(href, options));
+    }, []);
+}
+
+export { useOnNavigate };

package/dist/shared/routing/with-routing.d.ts

@@ -1,5 +1,5 @@
 import { ComponentProps, ComponentType, FC, MouseEventHandler } from 'react';
-import { NavigateOptions } from './route-provider';
+import { NavigateOptions } from './types';
 export interface WithRoutingProps {
     href?: string;
     route?: NavigateOptions;

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

@@ -1,5 +1,6 @@
 import { createElement } from 'react';
-import { useNavigate, useBasePath } from './route-provider.js';
+import { useBasePath } from './use-base-path.js';
+import { useNavigate } from './use-navigate.js';
 
 function withRouting(component) {
     const Component = ({ href, onClick, route, ...rest }) => {

package/dist/sign-in-form/sign-in-form.js

@@ -8,6 +8,7 @@ import { Switch } from '../forms/switch/switch.js';
 import { TextField } from '../forms/text-field/text-field.js';
 import { useFormattedMessage } from '../intl/use-formatted-message.js';
 import { Message } from '../message/message.js';
+import { validateEmail } from '../shared/model/address.js';
 import { Heading } from '../typography/heading/heading.js';
 import styles from './sign-in-form.module.css.js';
 
@@ -46,7 +47,11 @@ function SignInForm({ allowGuestSignIn = false, errorMessage, initialEmail, init
             },
         });
     };
-    return (jsxs(Form, { "aria-label": title, autoComplete: "off", className: clsx(styles['sign-in-form'], styles['form']), onSubmit: handleSubmit, validationBehavior: "native", children: [jsx("header", { className: styles['form-header'], children: jsx(Heading, { "data-test-selector": "PageTitle", italic: true, size: "m", tag: "h1", uppercase: true, children: title }) }), errorMessage === 'Access denied' && (jsx(Message, { type: "danger", children: t('Your email and password were not recognized.') })), errorMessage === 'Unexpected error' && (jsx(Message, { type: "danger", children: t('An unexpected error occured. Please try again.') })), jsxs("fieldset", { className: clsx(styles['form-fieldset'], styles['columns']), children: [jsx("div", { className: styles['form-segment'], children: jsx(TextField, { "data-test-selector": "signIn_userName", defaultValue: initialEmail, isDisabled: isDisabled, isRequired: true, label: t('Email'), name: "email", showLabel: true, type: "email" }) }), jsx("div", { className: styles['form-segment'], children: jsx(TextField, { "data-test-selector": "signIn_password", isDisabled: isDisabled, isRequired: true, label: t('Password'), name: "password", showLabel: true, type: "password" }) })] }), jsxs("footer", { className: styles['form-footer'], children: [jsx("div", { className: styles['form-segment'], children: jsx(Switch, { className: styles['floating'], defaultSelected: initialRememberMe, isDisabled: isDisabled, name: "rememberMe", value: "true", children: t('Remember me') }) }), jsx("div", { className: styles['form-segment'], children: jsx(Button, { "data-test-selector": "signIn_submit", isDisabled: isDisabled, isLoading: isPendingUserSignIn && t('Signing in…'), type: "submit", withArrow: true, children: t('sign in') }) }), jsxs("div", { className: styles['form-segment'], children: [jsx("p", { children: jsx(Link, { color: "primary", "data-test-selector": "signIn_forgotPassword", hasUnderline: true, href: "#", isDisabled: isDisabled, children: t('Forgot password?') }) }), jsxs("p", { children: [t('New user?'), ' ', jsx(Link, { "data-test-selector": "signInCreateNewAccount_createNewAccount", hasUnderline: true, href: "#", isDisabled: isDisabled, children: t('create account') })] })] }), allowGuestSignIn && (jsx("div", { className: styles['form-segment'], children: jsx(Button, { color: "secondary", isDisabled: isDisabled, isLoading: isPendingGuestSignIn && t('Signing in…'), isValidating: false, name: GUEST_SIGN_IN_BUTTON_NAME, type: "submit", value: "true", variant: "outline", children: t('Or continue as guest') }) }))] })] }));
+    return (jsxs(Form, { "aria-label": title, autoComplete: "off", className: clsx(styles['sign-in-form'], styles['form']), onSubmit: handleSubmit, validationBehavior: "native", children: [jsx("header", { className: styles['form-header'], children: jsx(Heading, { "data-test-selector": "PageTitle", italic: true, size: "m", tag: "h1", uppercase: true, children: title }) }), errorMessage === 'Access denied' && (jsx(Message, { type: "danger", children: t('Your email and password were not recognized.') })), errorMessage === 'Unexpected error' && (jsx(Message, { type: "danger", children: t('An unexpected error occured. Please try again.') })), jsxs("fieldset", { className: clsx(styles['form-fieldset'], styles['columns']), children: [jsx("div", { className: styles['form-segment'], children: jsx(TextField, { "data-test-selector": "signIn_userName", defaultValue: initialEmail, isDisabled: isDisabled, isRequired: true, label: t('Email'), name: "email", showLabel: true, type: "email", validate: value => {
+                                if (!value)
+                                    return value;
+                                return (validateEmail(value) || t('Please enter a valid e-mail address'));
+                            } }) }), jsx("div", { className: styles['form-segment'], children: jsx(TextField, { "data-test-selector": "signIn_password", isDisabled: isDisabled, isRequired: true, label: t('Password'), name: "password", showLabel: true, type: "password" }) })] }), jsxs("footer", { className: styles['form-footer'], children: [jsx("div", { className: styles['form-segment'], children: jsx(Switch, { className: styles['floating'], defaultSelected: initialRememberMe, isDisabled: isDisabled, name: "rememberMe", value: "true", children: t('Remember me') }) }), jsx("div", { className: styles['form-segment'], children: jsx(Button, { "data-test-selector": "signIn_submit", isDisabled: isDisabled, isLoading: isPendingUserSignIn && t('Signing in…'), type: "submit", withArrow: true, children: t('sign in') }) }), jsxs("div", { className: styles['form-segment'], children: [jsx("p", { children: jsx(Link, { color: "primary", "data-test-selector": "signIn_forgotPassword", hasUnderline: true, href: "#", isDisabled: isDisabled, children: t('Forgot password?') }) }), jsxs("p", { children: [t('New user?'), ' ', jsx(Link, { "data-test-selector": "signInCreateNewAccount_createNewAccount", hasUnderline: true, href: "#", isDisabled: isDisabled, children: t('create account') })] })] }), allowGuestSignIn && (jsx("div", { className: styles['form-segment'], children: jsx(Button, { color: "secondary", isDisabled: isDisabled, isLoading: isPendingGuestSignIn && t('Signing in…'), isValidating: false, name: GUEST_SIGN_IN_BUTTON_NAME, type: "submit", value: "true", variant: "outline", children: t('Or continue as guest') }) }))] })] }));
 }
 
 export { SignInForm };

package/dist/styles.css

@@ -5768,11 +5768,11 @@ button.swiper-pagination-bullet {
   display: grid;
   overflow: clip;
   font-family: var(--font-family-sonic);
+  grid-template: minmax(0, min-content) 1fr minmax(0, min-content) / 100%;
   grid-template-areas:
     'page-header'
     'page-main'
     'page-footer';
-  grid-template-rows: minmax(0, min-content) 1fr minmax(0, min-content);
 }
 
   /* main area, between page header and footer */
@@ -5782,11 +5782,11 @@ button.swiper-pagination-bullet {
     box-sizing: border-box;
     margin: 0 auto;
     grid-area: page-main;
+    grid-template: minmax(0, max-content) minmax(0, max-content) 1fr / 100%;
     grid-template-areas:
       'breadcrumbs'
       'title'
       'content';
-    grid-template-rows: minmax(0, max-content) minmax(0, max-content) 1fr;
     inline-size: 100%;
     max-inline-size: var(--page-container-max-width);
     padding-inline: var(--page-container-padding-inline);
@@ -5842,10 +5842,14 @@ button.swiper-pagination-bullet {
   }
     }
 
-  .page-container-module-eFYSe.page-container-module-iCrH5 .page-container-module-r0SOZ {
-    padding-block-end: 0;
+  .page-container-module-eFYSe.page-container-module-iCrH5 {
+    flex-grow: 1; /* TODO: required for Spire, remove later */
   }
 
+  .page-container-module-eFYSe.page-container-module-iCrH5 .page-container-module-r0SOZ {
+      padding-block-end: 0;
+    }
+
 .checkout-page-layout-module-lULV3 {
   --layout-width: var(--page-container-max-width, 100svw);
   --padding-inline: var(--page-container-padding-inline, 10px);
@@ -6053,27 +6057,27 @@ button.swiper-pagination-bullet {
   white-space: pre;
 }
 
-.edit-address-module-oC1yA {
+.edit-address-form-module-s19Fg {
   display: grid;
   gap: var(--space-16);
   grid-template-columns: 1fr;
 }
 
-  .edit-address-module-oC1yA .edit-address-module-7ANZQ {
+  .edit-address-form-module-s19Fg .edit-address-form-module-O1w3c {
     display: grid;
   }
 
-  @media (width >= 768px) {.edit-address-module-oC1yA {
+  @media (width >= 768px) {.edit-address-form-module-s19Fg {
     grid-template-columns: 1fr 1fr
 }
 
-    .edit-address-module-oC1yA .edit-address-module-7ANZQ {
+    .edit-address-form-module-s19Fg .edit-address-form-module-O1w3c {
       display: grid;
       grid-column: span 2;
     }
   }
 
-.edit-address-module-QAPy- {
+.edit-address-form-module-2bfdq {
   display: flex;
   flex-wrap: wrap;
   align-items: center;

package/package.json

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

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

@@ -1,3 +0,0 @@
-var styles = {"form":"edit-address-module-oC1yA","span-2":"edit-address-module-7ANZQ","use-invoice-checkbox":"edit-address-module-QAPy-"};
-
-export { styles as default };