@sonic-equipment/ui 136.0.0 → 137.0.0

package/dist/config.js

@@ -13,8 +13,8 @@ const configPerEnvironment = {
     local: () => ({
         ALGOLIA_API_KEY: 'e0edf30798a6b2e4e44fd25f0f2f9646',
         ALGOLIA_APP_ID: 'testing9VXJ0U4GSV',
-        ALGOLIA_HOST: 'shop-accept.sonic-equipment.workers.dev',
-        BFF_API_URL: 'https://shop-accept.sonic-equipment.workers.dev/api/v1/bff',
+        ALGOLIA_HOST: 'sonic.local.com:4443',
+        BFF_API_URL: '/api/v1/bff',
         COOKIE_DOMAIN: undefined,
         SHOP_API_URL: 
         // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition

package/dist/country-selector/country-select/country-select.d.ts

@@ -8,14 +8,20 @@ interface CountrySelectProps<T extends Country | CountryModel> {
     name?: string;
     showLabel?: boolean;
 }
+interface CountrySelectPropsWithDefaultSelectedCountry<T extends Country | CountryModel> extends CountrySelectProps<T> {
+    defaultSelectedCountry: T;
+    onCountryChange?: (country: T) => void;
+}
 interface CountrySelectPropsWithSelectedCountry<T extends Country | CountryModel> extends CountrySelectProps<T> {
     onCountryChange?: (country: T) => void;
     selectedCountry: T;
 }
 interface CountrySelectPropsWithoutSelectedCountry<T extends Country | CountryModel> extends CountrySelectProps<T> {
+    defaultSelectedCountry?: T | undefined;
     onCountryChange?: (country: T | undefined) => void;
     selectedCountry?: T | undefined;
 }
+export declare function CountrySelect<T extends Country | CountryModel>(props: CountrySelectPropsWithDefaultSelectedCountry<T>): JSX.Element;
 export declare function CountrySelect<T extends Country | CountryModel>(props: CountrySelectPropsWithSelectedCountry<T>): JSX.Element;
 export declare function CountrySelect<T extends Country | CountryModel>(props: CountrySelectPropsWithoutSelectedCountry<T>): JSX.Element;
 export {};

package/dist/country-selector/country-select/country-select.js

@@ -3,15 +3,21 @@ import { useMemo } from 'react';
 import { Select } from '../../forms/select/select.js';
 import { useFormattedMessage } from '../../intl/use-formatted-message.js';
 
-function CountrySelect({ countries, 'data-test-selector': dataTestSelector, isDisabled, isRequired, name, onCountryChange, selectedCountry, showLabel = true, }) {
+function CountrySelect({ countries, 'data-test-selector': dataTestSelector, defaultSelectedCountry, isDisabled, isRequired, name, onCountryChange, selectedCountry, showLabel = true, }) {
     const t = useFormattedMessage();
-    const countryOptions = useMemo(() => countries.reduce((acc, country) => ({
+    const countryOptions = useMemo(() => countries
+        .map((country) => [
+        country.id,
+        t(`clSelector.${country.abbreviation}`),
+    ])
+        .sort(([, labelA], [, labelB]) => labelA.localeCompare(labelB))
+        .reduce((acc, [id, label]) => ({
         ...acc,
-        [country.id]: t(`clSelector.${country.abbreviation}`),
+        [id]: label,
     }), {}), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [countries]);
-    return (jsx(Select, { "data-test-selector": dataTestSelector, isDisabled: isDisabled, isRequired: isRequired, label: t('Country'), name: name, onChange: value => onCountryChange?.(countries.find(country => country.id === value)), options: countryOptions, selectedOption: selectedCountry?.id, showLabel: showLabel, showPlaceholder: false, variant: "solid" }));
+    return (jsx(Select, { "data-test-selector": dataTestSelector, defaultSelectedOption: defaultSelectedCountry?.id, isDisabled: isDisabled, isRequired: isRequired, label: t('Country'), name: name, onChange: value => onCountryChange?.(countries.find(country => country.id === value)), options: countryOptions, selectedOption: selectedCountry?.id, showLabel: showLabel, showPlaceholder: false, variant: "solid" }));
 }
 
 export { CountrySelect };

package/dist/exports.d.ts

@@ -110,6 +110,7 @@ export * from './global-search/search-section/search-section';
 export * from './global-search/types';
 export * from './header/cart-icon/connected-cart-icon';
 export * from './header/hamburger-button/hamburger-button';
+export * from './header/header';
 export * from './header/header-layout/header-layout';
 export * from './header/sonic-logo/sonic-logo';
 export * from './info-icon-tooltip/info-icon-tooltip';

package/dist/header/header.d.ts

@@ -0,0 +1 @@
+export declare function Header(): import("react/jsx-runtime").JSX.Element;

package/dist/header/header.js

@@ -0,0 +1,9 @@
+import { jsx } from 'react/jsx-runtime';
+import { HeaderLayout } from './header-layout/header-layout.js';
+import { SonicLogo } from './sonic-logo/sonic-logo.js';
+
+function Header() {
+    return (jsx(HeaderLayout, { hamburgerButton: null, logo: jsx(SonicLogo, { href: "/" }), mainNavigation: null, navigationActions: null, search: null }));
+}
+
+export { Header };

package/dist/index.js

@@ -114,6 +114,7 @@ export { SearchListItem } from './global-search/search-section/search-list-item.
 export { SearchSection } from './global-search/search-section/search-section.js';
 export { ConnectedCartIcon } from './header/cart-icon/connected-cart-icon.js';
 export { HamburgerButton } from './header/hamburger-button/hamburger-button.js';
+export { Header } from './header/header.js';
 export { HeaderLayout } from './header/header-layout/header-layout.js';
 export { SonicLogo } from './header/sonic-logo/sonic-logo.js';
 export { InfoIconTooltip } from './info-icon-tooltip/info-icon-tooltip.js';

package/dist/media/image/image.js

@@ -25,12 +25,19 @@ function Image({ className, fallbackSrc = 'https://res.cloudinary.com/dkz9eknwh/
     }
     return jsx(ImageComponent, { ...props, hasError: hasError, image: image });
 }
+function createSrcSet(image) {
+    return ([
+        image[1] && `${image[1]} 1x`,
+        image[2] && `${image[2]} 2x`,
+        image[3] && `${image[3]} 3x`,
+    ]
+        .filter(Boolean)
+        .join(', ') || undefined);
+}
 function ImageComponent({ className, fallbackSrc, fit = 'cover', hasError, image, ...rest }) {
     if (!image)
         return (jsx("img", { alt: "Missing", className: clsx(styles.image, className, styles[fit], styles['has-error']), src: fallbackSrc, ...rest }));
-    const srcSet = hasError
-        ? undefined
-        : `${image[1]} 1x, ${image[2]} 2x, ${image[3]} 3x`;
+    const srcSet = hasError ? undefined : createSrcSet(image);
     return (jsx("img", { alt: image.altText, className: clsx(styles.image, className, styles[fit], {
             [styles['has-error']]: hasError,
         }), src: hasError ? fallbackSrc : image[3], srcSet: srcSet, ...rest }));
@@ -38,7 +45,7 @@ function ImageComponent({ className, fallbackSrc, fit = 'cover', hasError, image
 function PictureComponent({ className, fallbackSrc, fit = 'cover', hasError, image, ...rest }) {
     if (!image)
         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: [jsx("source", { media: "(max-width: 768px)", srcSet: `${image.sm[1]} 1x, ${image.sm[2]} 2x, ${image.sm[3]} 3x` }), jsx("source", { media: "(max-width: 1439px)", srcSet: `${image.md[1]} 1x, ${image.md[2]} 2x, ${image.md[3]} 3x` }), jsx("source", { media: "(min-width: 1440px)", srcSet: `${image.lg[1]} 1x, ${image.lg[2]} 2x, ${image.lg[3]} 3x` }), jsx("img", { alt: image.altText, className: clsx(styles.image, styles[fit], {
+    return (jsxs("picture", { className: clsx(styles.picture, className), children: [jsx("source", { media: "(max-width: 768px)", srcSet: createSrcSet(image.sm) }), jsx("source", { media: "(max-width: 1439px)", srcSet: createSrcSet(image.md) }), 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: hasError ? fallbackSrc : image.lg[3], ...rest })] }));
 }

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

@@ -39,7 +39,13 @@ function OrderConfirmationPageContent({ cart, }) {
             });
         },
     });
-    return (jsx(Page, { breadCrumb: [{ href: CHECKOUT_PATHS.HOME, label: t('Home') }], title: t('Order confirmation'), children: jsx(CheckoutPageLayout, { actions: {
+    return (jsx(Page, { breadCrumb: [
+            { href: CHECKOUT_PATHS.HOME, label: t('Home') },
+            {
+                href: `${CHECKOUT_PATHS.ORDER_CONFIRMATION}?cartId=${cart.id}`,
+                label: t('Order confirmation'),
+            },
+        ], title: t('Order confirmation'), children: jsx(CheckoutPageLayout, { actions: {
                 primary: (jsx(RouteButton, { withArrow: true, "data-test-selector": "checkoutReviewAndSubmit_continueShopping", href: "/", children: jsx(FormattedMessage, { id: "Continue shopping" }) })),
                 secondary: (jsxs(Fragment, { children: [cart.canSaveOrder && (jsx(RouteButton, { color: "secondary", onClick: () => {
                                 saveCartForLater.mutate({ cart });

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

@@ -127,10 +127,12 @@ function getAndRemoveAdyenQueryParams() {
         return {};
     const params = qs.parse(window.location.search || '');
     const { amount, customerId, redirectResult } = params;
-    delete params['redirectResult'];
-    delete params['amount'];
-    delete params['customerId'];
-    history?.pushState({}, '', `${window.location.pathname}${qs.stringify(params) ? `?${qs.stringify(params)}` : ''}`);
+    if (redirectResult) {
+        delete params['redirectResult'];
+        delete params['amount'];
+        delete params['customerId'];
+        history?.pushState({}, '', `${window.location.pathname}${qs.stringify(params) ? `?${qs.stringify(params)}` : ''}`);
+    }
     return { amount, customerId, redirectResult };
 }
 async function handlePaymentResponse(result, onSubmit, onError) {

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

@@ -29,9 +29,7 @@ import styles from './payment.module.css.js';
 
 function Payment({ atp, cart: _cart, form, onError: _onError, onPaymentComplete, onProcessing, onValidating, }) {
     const { createEcommerceEvent, dataLayer } = useDataLayer();
-    const { isLoading: isPatchingCart, mutate: patchCart } = usePatchCart({
-        skipInvalidation: true,
-    });
+    const { isLoading: isPatchingCart, mutate: patchCart } = usePatchCart();
     const { isLoading: isPatchingSession } = usePatchSession();
     const { isLoading: isPlacingCart, mutate: placeOrder } = usePlaceOrder();
     const { sendPurchaseEventFromPaymentPage } = useAlgoliaInsights();

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

@@ -8,6 +8,7 @@ interface Address {
     city: string;
     companyName: string;
     country: CountryModel;
+    email: string;
     firstName: string;
     lastName: string;
     phone: string;

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

@@ -36,6 +36,7 @@ function EditAddresses({ billTo, countries, isLoading, isPickup, onSubmit, }) {
                                     city: formData.get('address1')?.toString() || '',
                                     companyName: formData.get('companyName')?.toString() || '',
                                     country,
+                                    email: formData.get('email')?.toString() || '',
                                     firstName: formData.get('firstName')?.toString() || '',
                                     lastName: formData.get('address1')?.toString() || '',
                                     phone: formData.get('phone')?.toString() || '',
@@ -43,7 +44,7 @@ function EditAddresses({ billTo, countries, isLoading, isPickup, onSubmit, }) {
                                 },
                                 notes: formData.get('notes')?.toString() || '',
                             });
-                        }, children: [jsx(TextField, { defaultValue: billTo?.firstName, isDisabled: isLoading, label: t('First name'), name: "firstName", showLabel: true }), jsx(TextField, { isDisabled: isLoading, isRequired: !companyName, label: t('Last name'), minLength: 3, name: "lastName", onChange: setLastName, showLabel: true, value: lastName }, `lastname-${Boolean(companyName)}`), jsx(TextField, { defaultValue: billTo?.companyName, isDisabled: isLoading, label: t('Company name'), name: "companyName", onChange: setCompanyName, showLabel: true, value: companyName }), jsx(TextField, { defaultValue: billTo?.attention, isDisabled: isLoading, label: t('Attention'), name: "attention", showLabel: true }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { isRequired: true, defaultValue: billTo?.address1, isDisabled: isLoading, label: `${t('Address')} 1`, maxLength: 30, minLength: 3, name: "address1", showLabel: true }) }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { defaultValue: billTo?.address2, isDisabled: isLoading, label: `${t('Address')} 2`, maxLength: 30, minLength: 3, name: "address2", showLabel: true }) }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { defaultValue: billTo?.address3, isDisabled: isLoading, label: `${t('Address')} 3`, maxLength: 30, minLength: 3, name: "address3", showLabel: true }) }), jsx(TextField, { isRequired: true, defaultValue: billTo?.postalCode, isDisabled: isLoading, label: t('Postal Code'), maxLength: 10, minLength: 4, name: "postalCode", showLabel: true }), jsx(TextField, { isRequired: true, defaultValue: billTo?.city, isDisabled: isLoading, label: t('City'), maxLength: 30, minLength: 3, name: "city", showLabel: true }), jsx("div", { className: styles['span-2'], children: jsx(CountrySelect, { isRequired: true, countries: countries, "data-test-selector": "countrySelect", isDisabled: isLoading, name: "countrySelect", selectedCountry: countries.find(country => country.id === billTo?.country?.id) }) }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { isRequired: true, defaultValue: billTo?.phone, isDisabled: isLoading, label: t('Phone'), name: "phone", showLabel: true, validate: value => {
+                        }, children: [jsx(TextField, { defaultValue: billTo?.firstName, isDisabled: isLoading, label: t('First name'), name: "firstName", showLabel: true }), jsx(TextField, { isDisabled: isLoading, isRequired: !companyName, label: t('Last name'), minLength: 3, name: "lastName", onChange: setLastName, showLabel: true, value: lastName }, `lastname-${Boolean(companyName)}`), jsx(TextField, { defaultValue: billTo?.companyName, isDisabled: isLoading, label: t('Company name'), name: "companyName", onChange: setCompanyName, showLabel: true, value: companyName }), jsx(TextField, { defaultValue: billTo?.attention, isDisabled: isLoading, label: t('Attention'), name: "attention", showLabel: true }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { isRequired: true, defaultValue: billTo?.address1, isDisabled: isLoading, label: `${t('Address')} 1`, maxLength: 30, minLength: 3, name: "address1", showLabel: true }) }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { defaultValue: billTo?.address2, isDisabled: isLoading, label: `${t('Address')} 2`, maxLength: 30, minLength: 3, name: "address2", showLabel: true }) }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { defaultValue: billTo?.address3, isDisabled: isLoading, label: `${t('Address')} 3`, maxLength: 30, minLength: 3, name: "address3", showLabel: true }) }), jsx(TextField, { isRequired: true, defaultValue: billTo?.postalCode, isDisabled: isLoading, label: t('Postal Code'), maxLength: 10, minLength: 4, name: "postalCode", showLabel: true }), jsx(TextField, { isRequired: true, defaultValue: billTo?.city, isDisabled: isLoading, label: t('City'), maxLength: 30, minLength: 3, name: "city", showLabel: true }), jsx("div", { className: styles['span-2'], children: jsx(CountrySelect, { isRequired: true, countries: countries, "data-test-selector": "countrySelect", defaultSelectedCountry: countries.find(country => country.id === billTo?.country?.id), isDisabled: isLoading, name: "countrySelect" }) }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { isRequired: true, defaultValue: billTo?.phone, isDisabled: isLoading, label: t('Phone'), name: "phone", showLabel: true, validate: value => {
                                         if (!value)
                                             return value;
                                         return (validatePhone(value) ||

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

@@ -1,4 +1,4 @@
-import { BillToModel, CartModel } from '../../../../shared/api/storefront/model/storefront.model';
+import { BillToModel, CartModel, SessionModel } from '../../../../shared/api/storefront/model/storefront.model';
 export declare function usePatchShippingDetails(): {
     error: unknown;
     isError: boolean;
@@ -8,5 +8,9 @@ export declare function usePatchShippingDetails(): {
         billTo?: BillToModel;
         cart: CartModel;
         notes: string | undefined;
-    }) => Promise<void>;
+    }) => Promise<{
+        patchedBillTo: BillToModel | undefined;
+        patchedCart: CartModel;
+        patchedSession: SessionModel | undefined;
+    }>;
 };

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

@@ -1,19 +1,38 @@
 import { useAwaitableMutation } from '../../../../shared/api/shared/hooks/use-awaitable-mutation.js';
+import { patchSession } from '../../../../shared/api/storefront/services/authentication-service.js';
 import { patchCart } from '../../../../shared/api/storefront/services/cart-service.js';
 import { patchBillToAddress } from '../../../../shared/api/storefront/services/customer-service.js';
 
 function usePatchShippingDetails() {
     return useAwaitableMutation({
         mutationFn: async ({ billTo, cart, notes, }) => {
-            await Promise.all([
-                billTo && patchBillToAddress({ billTo }),
-                patchCart({ cart: { ...cart, notes } }),
-            ].filter(Boolean));
+            const patchedBillTo = billTo
+                ? await patchBillToAddress({ billTo })
+                : undefined;
+            const patchedSession = patchedBillTo
+                ? await patchSession({
+                    session: {
+                        billTo: { id: patchedBillTo.id },
+                        customerWasUpdated: true,
+                        shipTo: { id: cart.shipTo?.id || patchedBillTo.id },
+                    },
+                })
+                : undefined;
+            const patchedCart = await patchCart({
+                cart: { ...cart, billTo: patchedBillTo, notes },
+            });
+            return { patchedBillTo, patchedCart, patchedSession };
         },
-        onSuccess: ({ queryClient }) => {
-            queryClient.removeQueries({ queryKey: ['customer'] });
-            queryClient.removeQueries({ queryKey: ['carts'] });
-            queryClient.removeQueries({ queryKey: ['session'] });
+        onSuccess: ({ data: { patchedBillTo, patchedCart, patchedSession }, queryClient, }) => {
+            if (patchedBillTo)
+                queryClient.setQueryData(['customer', 'bill-to-addresses'], patchedBillTo);
+            if (patchedSession) {
+                queryClient.setQueryData(['session'], patchedSession);
+            }
+            else if (patchedBillTo) {
+                queryClient.removeQueries({ queryKey: ['session'] });
+            }
+            queryClient.setQueryData(['carts', patchedCart.id], patchedCart);
         },
     });
 }

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

@@ -1,7 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { useRef, useEffect } from 'react';
 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 { usePatchSession } from '../../../shared/api/storefront/hooks/authentication/use-patch-session.js';
 import { useFetchCurrentCart } from '../../../shared/api/storefront/hooks/cart/use-fetch-current-cart.js';
 import { useFetchFulfillmentMethodsForCurrentCart } from '../../../shared/api/storefront/hooks/customer/use-fetch-fulfillment-methods-for-current-cart.js';
@@ -18,17 +17,17 @@ import { usePatchShippingDetails } from './hooks/use-patch-shipping-details.js';
 import { ShippingPageContent } from './shipping-page-content.js';
 
 function ShippingPage() {
-    const isAuthenticated = useIsAuthenticated();
     const { createEcommerceEvent, dataLayer } = useDataLayer();
     const gaEventPushed = useRef(false);
     const { data: cart, error: errorFetchCart, isLoading: isLoadingCart, refetch: refetchCart, } = useFetchCurrentCart();
+    const { data: session } = useFetchSession();
     const { data: countries, isLoading: isLoadingCountries } = useFetchCountries({
-        enabled: hasNo(cart?.billTo?.address1),
+        enabled: hasNo(cart?.billTo?.address1) || Boolean(session?.isGuest),
     });
-    const { data: session } = useFetchSession();
     const { data: fulfillmentMethods, isLoading: isLoadingFulfillmentMethods } = useFetchFulfillmentMethodsForCurrentCart();
     const { isLoading: isPatchingSession, mutate: patchSession } = usePatchSession();
     const { error: errorPatchBillingAddress, isError, isLoading: isPatching, isSuccess, mutate: patchShippingDetails, } = usePatchShippingDetails();
+    const isAuthenticated = session?.isAuthenticated;
     const isLoading = isLoadingCart || isLoadingCountries || isLoadingFulfillmentMethods;
     const { isNavigating, navigate } = useNavigate();
     const isPickup = cart?.fulfillmentMethod === 'PickUp';

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

@@ -1,29 +1,30 @@
 import { QueryClient } from '@tanstack/react-query';
-export type InferPromiseResult<T> = T extends (...args: any) => Promise<infer TResult> ? TResult : never;
-interface UseAwaitableMutationArgs<T extends (...args: any) => Promise<TResult>, TResult = InferPromiseResult<T>> {
+export type OnError<T extends (...args: any) => Promise<unknown>> = (args: {
+    args: Parameters<T>;
+    error: unknown;
+    queryClient: QueryClient;
+}) => void;
+export type OnSuccess<T extends (...args: any) => Promise<TResult>, TResult = Awaited<ReturnType<T>>> = (args: {
+    args: Parameters<T>;
+    data: TResult;
+    queryClient: QueryClient;
+}) => void;
+export type OnComplete<T extends (...args: any) => Promise<TResult>, TResult = Awaited<ReturnType<T>>> = (args: {
+    args: Parameters<T>;
+    data: TResult | undefined;
+    error: unknown | undefined;
+    queryClient: QueryClient;
+}) => void;
+export interface UseAwaitableMutationArgs<T extends (...args: any) => Promise<TResult>, TResult = Awaited<ReturnType<T>>> {
     mutationFn: T;
-    onComplete?: (args: {
-        args: Parameters<T>;
-        data: TResult | undefined;
-        error: unknown | undefined;
-        queryClient: QueryClient;
-    }) => void;
-    onError?: (args: {
-        args: Parameters<T>;
-        error: unknown;
-        queryClient: QueryClient;
-    }) => void;
-    onSuccess?: (args: {
-        args: Parameters<T>;
-        data: TResult;
-        queryClient: QueryClient;
-    }) => void;
+    onComplete?: OnComplete<T, TResult>;
+    onError?: OnError<T>;
+    onSuccess?: OnSuccess<T, TResult>;
 }
-export declare function useAwaitableMutation<T extends (...args: any) => Promise<TResult>, TResult = InferPromiseResult<T>>({ mutationFn, onComplete, onError, onSuccess, }: UseAwaitableMutationArgs<T, TResult>): {
+export declare function useAwaitableMutation<T extends (...args: any) => Promise<TResult>, TResult = Awaited<ReturnType<T>>>({ mutationFn, onComplete, onError, onSuccess, }: UseAwaitableMutationArgs<T, TResult>): {
     error: unknown;
     isError: boolean;
     isLoading: boolean;
     isSuccess: boolean;
     mutate: (...args: Parameters<T>) => Promise<TResult>;
 };
-export {};

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

@@ -1,6 +1,4 @@
-export declare function usePatchCart({ skipInvalidation, }?: {
-    skipInvalidation?: boolean;
-}): {
+export declare function usePatchCart(): {
     error: unknown;
     isError: boolean;
     isLoading: boolean;

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

@@ -2,15 +2,13 @@ import { useCallback } from 'react';
 import { useAwaitableMutation } from '../../../shared/hooks/use-awaitable-mutation.js';
 import { patchCart } from '../../services/cart-service.js';
 
-function usePatchCart({ skipInvalidation = false, } = {}) {
+function usePatchCart() {
     const onError = useCallback(({ args: [{ cart }], queryClient }) => {
         queryClient.invalidateQueries({ queryKey: ['carts', cart.id] });
     }, []);
-    const onSuccess = useCallback(({ args: [{ cart }], queryClient }) => {
-        if (skipInvalidation)
-            return;
-        queryClient.removeQueries({ queryKey: ['carts', cart.id] });
-    }, [skipInvalidation]);
+    const onSuccess = useCallback(({ args: [{ cart }], data, queryClient }) => {
+        queryClient.setQueryData(['carts', cart.id], data);
+    }, []);
     return useAwaitableMutation({
         mutationFn: patchCart,
         onError,

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

@@ -6,5 +6,5 @@ export declare const usePlaceOrder: () => {
     mutate: (args_0: {
         cart: import("../../model/storefront.model").CartModel;
         isPending?: boolean;
-    }) => Promise<any>;
+    }) => Promise<import("../../model/storefront.model").CartModel>;
 };

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

@@ -3,15 +3,16 @@ import { useAwaitableMutation } from '../../../shared/hooks/use-awaitable-mutati
 import { placeOrder } from '../../services/cart-service.js';
 
 const usePlaceOrder = () => {
-    const onComplete = useCallback(({ args: [{ cart }], queryClient }) => {
-        queryClient.removeQueries({ queryKey: ['carts', cart.id] });
+    const onSuccess = useCallback(({ data: cart, queryClient }) => {
+        queryClient.invalidateQueries({ queryKey: ['carts', 'current'] });
+        queryClient.setQueryData(['carts', cart.id], cart);
     }, []);
-    const onSuccess = useCallback(({ data: updatedCart, queryClient }) => {
-        queryClient.removeQueries({ queryKey: ['carts', updatedCart.id] });
+    const onError = useCallback(({ queryClient }) => {
+        queryClient.invalidateQueries({ queryKey: ['carts'] });
     }, []);
     return useAwaitableMutation({
         mutationFn: placeOrder,
-        onComplete,
+        onError,
         onSuccess,
     });
 };

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

@@ -37,16 +37,16 @@ async function patchCartLineById({ cartLine, cartLineId, }) {
     });
 }
 async function patchCart({ cart, }) {
-    await request({
+    const { body } = await request({
         body: cart,
         credentials: 'include',
         headers: {
             'Content-Type': 'application/json',
         },
         method: 'PATCH',
-        url: `${config.SHOP_API_URL}/api/v1/carts/current`,
+        url: `${config.BFF_API_URL}/api/v1/carts/current`,
     });
-    return await fetchCart(cart);
+    return body;
 }
 async function deleteCurrentCart() {
     const { body } = await request({
@@ -103,16 +103,16 @@ async function placeOrder({ cart, isPending, }) {
         : isPending
             ? 'PendingPaymentValidation'
             : 'Submitted';
-    await request({
+    const { body } = await request({
         body: { ...cart, status: newStatus },
         credentials: 'include',
         headers: {
             'Content-Type': 'application/json',
         },
         method: 'PATCH',
-        url: `${config.SHOP_API_URL}/api/v1/carts/current`,
+        url: `${config.BFF_API_URL}/api/v1/carts/current`,
     });
-    return await fetchCart(cart);
+    return body;
 }
 async function saveCartForLater({ cart }) {
     // USER NEEDS TO BE LOGGED IN
@@ -123,7 +123,7 @@ async function saveCartForLater({ cart }) {
             'Content-Type': 'application/json',
         },
         method: 'PATCH',
-        url: `${config.SHOP_API_URL}/api/v1/carts/current`,
+        url: `${config.BFF_API_URL}/api/v1/carts/current`,
     });
     return body;
 }

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

@@ -1,4 +1,4 @@
-interface DPRSrcSet {
+export interface DPRSrcSet {
     1: string;
     2: string;
     3: string;
@@ -24,4 +24,3 @@ export interface ResponsiveImageType {
     sm: DPRSrcSet;
 }
 export declare function isResponsiveImage(image: ImageType | ResponsiveImageType | undefined): image is ResponsiveImageType;
-export {};

package/dist/styles.css

@@ -4928,7 +4928,7 @@ button.swiper-pagination-bullet {
   }
 
   .header-layout-module-VlTuk .header-layout-module-oKPyL {
-    width: var(--space-100);
+    inline-size: min(var(--space-100), 100%);
     justify-self: center;
   }
 

package/package.json

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