@sonic-equipment/ui 124.0.0 → 125.0.0

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

@@ -0,0 +1,54 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, useMemo } from 'react';
+import { Form } from 'react-aria-components';
+import { CountrySelect } from '../../../country-selector/country-select/country-select.js';
+import { Checkbox } from '../../../forms/checkbox/checkbox.js';
+import { TextField } from '../../../forms/text-field/text-field.js';
+import { FormattedMessage } from '../../../intl/formatted-message.js';
+import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
+import { validatePhone, validateEmail } from '../../../shared/model/address.js';
+import { Tooltip } from '../../../tooltip/tooltip.js';
+import { Heading } from '../../../typography/heading/heading.js';
+import styles from './edit-address.module.css.js';
+
+const EDIT_ADDRESS_FORM_ID = 'billToForm';
+function EditAddresses({ countries, isLoading, onSubmit, }) {
+    const t = useFormattedMessage();
+    const [companyName, setCompanyName] = useState('');
+    const [lastName, setLastName] = useState('');
+    const lastNameKey = useMemo(() => `lastname-${Boolean(companyName)}`, [companyName]);
+    return (jsxs(Fragment, { children: [jsxs("section", { className: styles['form-container'], children: [jsx(Heading, { className: styles['form-header'], size: "xs", tag: "h2", children: jsx(FormattedMessage, { id: "Billing address" }) }), jsxs(Form, { className: styles.form, "data-test-selector": "billToAddressForm", id: EDIT_ADDRESS_FORM_ID, onSubmit: e => {
+                            e.preventDefault();
+                            const formData = new FormData(e.currentTarget);
+                            const countryFormValue = formData.get('country')?.toString();
+                            const country = countries.find(country => country.id === countryFormValue);
+                            if (!country)
+                                throw new Error(`Country not found ${formData.get('country')}`);
+                            onSubmit({
+                                address: {
+                                    address1: formData.get('address1')?.toString() || '',
+                                    address2: formData.get('address2')?.toString() || '',
+                                    address3: formData.get('address3')?.toString() || '',
+                                    attention: formData.get('attention')?.toString() || '',
+                                    city: formData.get('address1')?.toString() || '',
+                                    companyName: formData.get('companyName')?.toString() || '',
+                                    country,
+                                    firstName: formData.get('firstName')?.toString() || '',
+                                    lastName: formData.get('address1')?.toString() || '',
+                                    phone: formData.get('phone')?.toString() || '',
+                                    postalCode: formData.get('postalCode')?.toString() || '',
+                                },
+                                notes: formData.get('notes')?.toString() || '',
+                            });
+                        }, children: [jsx(TextField, { 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 }, lastNameKey), jsx(TextField, { isDisabled: isLoading, label: t('Company name'), name: "companyName", onChange: setCompanyName, showLabel: true, value: companyName }), jsx(TextField, { isDisabled: isLoading, label: t('Attention'), name: "attention", showLabel: true }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { isRequired: true, isDisabled: isLoading, label: `${t('Address')} 1`, maxLength: 30, minLength: 3, name: "address1", showLabel: true }) }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { isDisabled: isLoading, label: `${t('Address')} 2`, maxLength: 30, minLength: 3, name: "address2", showLabel: true }) }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { isDisabled: isLoading, label: `${t('Address')} 3`, maxLength: 30, minLength: 3, name: "address3", showLabel: true }) }), jsx(TextField, { isRequired: true, isDisabled: isLoading, label: t('Postal Code'), maxLength: 10, minLength: 4, name: "postalCode", showLabel: true }), jsx(TextField, { isRequired: true, 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, name: "country" }) }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { isRequired: true, isDisabled: isLoading, label: t('Phone'), name: "phone", showLabel: true, validate: value => {
+                                        if (!value)
+                                            return value;
+                                        return (validatePhone(value) || 'Vul een geldig telefoonnummer in');
+                                    } }) }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { isRequired: true, isDisabled: isLoading, label: t('Email'), name: "email", showLabel: true, type: "email", validate: value => {
+                                        if (!value)
+                                            return value;
+                                        return validateEmail(value) || 'Vul een geldig emailadres in';
+                                    } }) }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { isDisabled: isLoading, isMultiline: true, label: t('Add order notes'), name: "notes", rows: 3, showLabel: true }) })] })] }), jsxs("section", { className: styles['form-container'], children: [jsx(Heading, { className: styles['form-header'], size: "xs", tag: "h2", children: jsx(FormattedMessage, { id: "Shipping address" }) }), jsxs("div", { className: styles['use-invoice-checkbox'], children: [jsx(Checkbox, { isDisabled: true, isSelected: true, children: jsx(FormattedMessage, { id: "Use billing address" }) }), jsx(Tooltip, { text: t('Changing your address is currently not possible. Please contact customer support to change your address.') })] })] })] }));
+}
+
+export { EDIT_ADDRESS_FORM_ID, EditAddresses };

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

@@ -0,0 +1,3 @@
+var styles = {"form-container":"edit-address-module-dphSX","form-header":"edit-address-module-8FyLR","form":"edit-address-module-dtGk5","span-2":"edit-address-module-HVdsP","use-invoice-checkbox":"edit-address-module-H8hM-"};
+
+export { styles as default };

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

@@ -0,0 +1,10 @@
+import { BillToModel, ShipToModel } from '../../../shared/api/storefront/model/storefront.model';
+export declare function ReadOnlyAddresses({ billTo, isLoading, notes, onSubmit, shipTo, }: {
+    billTo: BillToModel | undefined | null;
+    isLoading: boolean;
+    notes: string;
+    onSubmit: ({ notes }: {
+        notes: string;
+    }) => void;
+    shipTo: ShipToModel | undefined | null;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,25 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Form } from 'react-aria-components';
+import { Address } from '../../../address/address.js';
+import { Checkbox } from '../../../forms/checkbox/checkbox.js';
+import { TextField } from '../../../forms/text-field/text-field.js';
+import { FormattedMessage } from '../../../intl/formatted-message.js';
+import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
+import { RouteLink } from '../../../shared/routing/route-link.js';
+import { Heading } from '../../../typography/heading/heading.js';
+import { EDIT_ADDRESS_FORM_ID } from './edit-address.js';
+import styles from './readonly-address.module.css.js';
+
+const ACCOUNT_ADDRESSES_PATH = '/MyAccount/Addresses';
+function ReadOnlyAddresses({ billTo, isLoading, notes, onSubmit, shipTo, }) {
+    const t = useFormattedMessage();
+    return (jsxs(Form, { className: styles.form, id: EDIT_ADDRESS_FORM_ID, onSubmit: e => {
+            e.preventDefault();
+            const formData = new FormData(e.currentTarget);
+            onSubmit({
+                notes: formData.get('notes')?.toString() || '',
+            });
+        }, children: [jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xs", tag: "h2", children: jsx(FormattedMessage, { id: "Billing address" }) }), jsxs(RouteLink, { className: styles['section-link'], color: "secondary", href: ACCOUNT_ADDRESSES_PATH, isDisabled: isLoading, children: [jsx(FormattedMessage, { id: "Edit billing address" }), " >"] }), jsxs("div", { className: styles['section-content'], children: [billTo && (jsx(Address, { city: billTo.city, companyName: billTo.companyName, country: billTo.country?.name, email: billTo.email, phone: billTo.phone, postalCode: billTo.postalCode })), jsx("div", { className: styles.notes, children: jsx(TextField, { defaultValue: notes, isDisabled: isLoading, isMultiline: true, label: t('Add order notes'), name: "notes", rows: 3, showLabel: true }) })] })] }), jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xs", tag: "h2", children: jsx(FormattedMessage, { id: "Shipping address" }) }), jsxs(RouteLink, { className: styles['section-link'], color: "secondary", href: ACCOUNT_ADDRESSES_PATH, isDisabled: isLoading, children: [jsx(FormattedMessage, { id: "Edit shipping address" }), " >"] }), jsxs("div", { className: styles['section-content'], children: [jsx(Checkbox, { className: styles['use-invoice-checkbox'], isDisabled: true, isSelected: true, children: jsx(FormattedMessage, { id: "Use billing address" }) }), shipTo && (jsx(Address, { city: shipTo.city, companyName: shipTo.companyName, country: shipTo.country?.name, email: shipTo.email, phone: shipTo.phone, postalCode: shipTo.postalCode }))] })] })] }));
+}
+
+export { ReadOnlyAddresses };

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

@@ -0,0 +1,3 @@
+var styles = {"section":"readonly-address-module-86tan","section-header":"readonly-address-module-VLsk2","section-content":"readonly-address-module-84Ake","section-link":"readonly-address-module-rxXHA","notes":"readonly-address-module-mhW4y","use-invoice-checkbox":"readonly-address-module-qgm1D"};
+
+export { styles as default };

package/dist/pages/shipping-page/shipping-page.d.ts

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

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

@@ -0,0 +1,75 @@
+import { jsx } from 'react/jsx-runtime';
+import { useEffect } from 'react';
+import { Button } from '../../buttons/button/button.js';
+import { CartTotals } from '../../cart-totals/cart-totals.js';
+import { CartTotalsSummary } from '../../cart-totals/cart-totals-summary.js';
+import { FormattedMessage } from '../../intl/formatted-message.js';
+import { useFormattedMessage } from '../../intl/use-formatted-message.js';
+import { useFetchCurrentCart } from '../../shared/api/storefront/hooks/cart/use-fetch-current-cart.js';
+import { usePatchCart } from '../../shared/api/storefront/hooks/cart/use-patch-cart.js';
+import { usePatchBillToAddress } from '../../shared/api/storefront/hooks/customer/use-patch-bill-to-address.js';
+import { useFetchCountries } from '../../shared/api/storefront/hooks/website/use-fetch-countries.js';
+import { useNavigate } from '../../shared/routing/route-provider.js';
+import { ErrorPage } from '../error-page/error-page.js';
+import { CheckoutPageLayout } from '../layouts/checkout-page-layout/checkout-page-layout.js';
+import { LoadingPage } from '../loading-page/loading-page.js';
+import { Page } from '../page/page.js';
+import { EDIT_ADDRESS_FORM_ID, EditAddresses } from './components/edit-address.js';
+import { ReadOnlyAddresses } from './components/readonly-address.js';
+import styles from './shipping-page.module.css.js';
+
+const REVIEW_AND_SUBMIT_PATH = '/CheckoutReviewAndSubmit';
+function ShippingPage() {
+    const { data: cart, error, isLoading: isLoadingCart } = useFetchCurrentCart();
+    const hasCart = Boolean(cart);
+    const hasBillTo = Boolean(cart?.billTo);
+    const hasEmptyBillTo = Boolean(cart?.billTo?.address1);
+    const { data: countries, isLoading: isLoadingCountries } = useFetchCountries({
+        enabled: !hasEmptyBillTo,
+    });
+    const { isLoading: isPatchBillToAddress, mutate: patchBillToAddress } = usePatchBillToAddress();
+    const { isLoading: isPatchingCart, mutate: patchCart } = usePatchCart();
+    const t = useFormattedMessage();
+    const isLoading = isLoadingCart || isLoadingCountries;
+    const isPatching = isPatchBillToAddress || isPatchingCart;
+    const navigate = useNavigate();
+    useEffect(() => {
+        if (hasCart && !hasBillTo)
+            navigate('/sign-in?returnUrl=/CheckoutShipping');
+    }, [hasCart, hasBillTo, navigate]);
+    if (error)
+        return jsx(ErrorPage, { error: error });
+    if (isLoading)
+        return jsx(LoadingPage, {});
+    if (!cart || (!hasEmptyBillTo && !countries))
+        return null;
+    if (!hasBillTo) {
+        return (jsx(Page, { breadCrumb: [
+                { href: '/', label: t('Home') },
+                { href: '/CheckoutShipping', label: t('Shipping details') },
+            ], children: jsx("h1", { children: jsx(FormattedMessage, { id: "Please Sign In" }) }) }));
+    }
+    return (jsx(Page, { breadCrumb: [
+            { href: '/', label: t('Home') },
+            { href: '/CheckoutShipping', label: t('Shipping details') },
+        ], title: t('Shipping details'), children: jsx(CheckoutPageLayout, { actions: {
+                primary: (jsx(Button, { withArrow: true, "data-test-selector": "checkoutShippingCartTotalContinueButton", form: EDIT_ADDRESS_FORM_ID, isDisabled: isPatching, isLoading: isPatching && jsx(FormattedMessage, { id: "Continue shopping" }), type: "submit", children: jsx(FormattedMessage, { id: "Continue shopping" }) })),
+            }, mobileSummary: jsx(CartTotalsSummary, { totalAmount: cart.orderGrandTotalDisplay }), overview: jsx(CartTotals, { shippingCost: cart.shippingAndHandlingDisplay, subtotal: cart.orderSubTotalDisplay, tax: cart.totalTaxDisplay, total: cart.orderGrandTotalDisplay, vatPercentage: cart.cartLines?.[0]?.pricing?.vatRate || 0 }), children: jsx("div", { className: styles['main-content'], children: hasEmptyBillTo ? (jsx(ReadOnlyAddresses, { billTo: cart.billTo, isLoading: isPatching, notes: cart.notes, onSubmit: async ({ notes }) => {
+                        if (!cart.billTo)
+                            return;
+                        await patchCart({ cart: { ...cart, notes } });
+                        navigate(REVIEW_AND_SUBMIT_PATH);
+                    }, shipTo: cart.shipTo })) : (jsx(EditAddresses, { countries: countries || [], isLoading: isPatching, onSubmit: async ({ address, notes }) => {
+                        if (!cart.billTo)
+                            return;
+                        await Promise.all([
+                            patchBillToAddress({
+                                billTo: { ...cart.billTo, ...address },
+                            }),
+                            patchCart({ cart: { ...cart, notes } }),
+                        ]);
+                        navigate(REVIEW_AND_SUBMIT_PATH);
+                    } })) }) }) }));
+}
+
+export { ShippingPage };

package/dist/pages/shipping-page/shipping-page.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"main-content":"shipping-page-module-vmV0t"};
+
+export { styles as default };

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

@@ -0,0 +1,13 @@
+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>> {
+    mutationFn: T;
+    onComplete?: (data: TResult | undefined, error: unknown | undefined, variables: Parameters<T>, queryClient: QueryClient) => void;
+    onError?: (error: unknown, variables: Parameters<T>, queryClient: QueryClient) => void;
+    onSuccess?: (data: TResult, variables: Parameters<T>, queryClient: QueryClient) => void;
+}
+export declare function useAwaitableMutation<T extends (...args: any) => Promise<TResult>, TResult = InferPromiseResult<T>>({ mutationFn, onComplete, onError, onSuccess, }: UseAwaitableMutationArgs<T, TResult>): {
+    isLoading: boolean;
+    mutate(...args: Parameters<T>): Promise<TResult>;
+};
+export {};

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

@@ -0,0 +1,32 @@
+import { useState } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+
+function useAwaitableMutation({ mutationFn, onComplete, onError, onSuccess, }) {
+    const queryClient = useQueryClient();
+    const [isLoading, setIsLoading] = useState(false);
+    return {
+        isLoading,
+        async mutate(...args) {
+            let result;
+            let error;
+            try {
+                setIsLoading(true);
+                const _result = await mutationFn(...args);
+                result = _result;
+                onSuccess?.(_result, args, queryClient);
+                return result;
+            }
+            catch (err) {
+                error = err;
+                onError?.(error, args, queryClient);
+                throw err;
+            }
+            finally {
+                setIsLoading(false);
+                onComplete?.(result, error, args, queryClient);
+            }
+        },
+    };
+}
+
+export { useAwaitableMutation };

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

@@ -1,4 +1,4 @@
-import { AccountModel } from 'shared/api/storefront/model/shop.model';
+import { AccountModel } from 'shared/api/storefront/model/storefront.model';
 export declare function useCreateGuestAccount(): import("@tanstack/react-query").UseMutationResult<AccountModel, Error, {
     defaultWarehouseId: string;
 }, unknown>;

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

@@ -1,4 +1,4 @@
-import { SessionModel as ShopSessionModel } from '../../model/shop.model';
+import { SessionModel as ShopSessionModel } from '../../model/storefront.model';
 export declare function useFetchSession({ enabled, }?: {
     enabled?: boolean;
 }): import("@tanstack/react-query").UseQueryResult<ShopSessionModel, Error>;

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

@@ -1,4 +1,4 @@
-import { PatchSessionModel, SessionModel } from 'shared/api/storefront/model/shop.model';
+import { PatchSessionModel, SessionModel } from 'shared/api/storefront/model/storefront.model';
 export declare function usePatchSession(): import("@tanstack/react-query").UseMutationResult<SessionModel, Error, {
     session: PatchSessionModel;
 }, unknown>;

package/dist/shared/api/storefront/hooks/cart/use-add-product-to-current-cart.d.ts

@@ -1,3 +1,3 @@
-import { CartLineModel } from '../../model/shop.model';
+import { CartLineModel } from '../../model/storefront.model';
 import { AddProductToCurrentCartParams } from '../../services/cart-service';
 export declare function useAddProductToCurrentCart(): import("@tanstack/react-query").UseMutationResult<CartLineModel, Error, AddProductToCurrentCartParams, unknown>;

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

@@ -1,4 +1,4 @@
-import { CartModel } from '../../model/shop.model';
+import { CartModel } from '../../model/storefront.model';
 interface UseDeleteCurrentCartArgs {
     onError?: () => void;
     onSuccess?: () => void;

package/dist/shared/api/storefront/hooks/cart/use-fetch-current-cart-checkout-atp.d.ts

@@ -1,2 +1,2 @@
-import { CheckoutAtpEntry } from '../../model/shop.model';
+import { CheckoutAtpEntry } from '../../model/storefront.model';
 export declare function useFetchCurrentCheckoutAtp(): import("@tanstack/react-query").UseQueryResult<CheckoutAtpEntry[], Error>;

package/dist/shared/api/storefront/hooks/cart/use-fetch-current-cart-lines-with-atp.d.ts

@@ -1,5 +1,5 @@
 export declare function useFetchCurrentCartLinesWithAtp(): {
-    data: import("../../model/shop.model").CartLineModel[] | undefined;
+    data: import("../../model/storefront.model").CartLineModel[] | undefined;
     error: Error | null;
     isError: boolean;
     isFetching: boolean;
@@ -21,11 +21,11 @@ export declare function useFetchCurrentCartLinesWithAtp(): {
     isPlaceholderData: boolean;
     isRefetching: boolean;
     isStale: boolean;
-    refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<import("../../model/shop.model").CartModel, Error>>;
+    refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<import("../../model/storefront.model").CartModel, Error>>;
     fetchStatus: import("@tanstack/react-query").FetchStatus;
-    promise: Promise<import("../../model/shop.model").CartModel>;
+    promise: Promise<import("../../model/storefront.model").CartModel>;
 } | {
-    data: import("../../model/shop.model").CartLineModel[] | undefined;
+    data: import("../../model/storefront.model").CartLineModel[] | undefined;
     error: Error | null;
     isError: boolean;
     isFetching: boolean;
@@ -47,11 +47,11 @@ export declare function useFetchCurrentCartLinesWithAtp(): {
     isPlaceholderData: boolean;
     isRefetching: boolean;
     isStale: boolean;
-    refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<import("../../model/shop.model").CartModel, Error>>;
+    refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<import("../../model/storefront.model").CartModel, Error>>;
     fetchStatus: import("@tanstack/react-query").FetchStatus;
-    promise: Promise<import("../../model/shop.model").CartModel>;
+    promise: Promise<import("../../model/storefront.model").CartModel>;
 } | {
-    data: import("../../model/shop.model").CartLineModel[] | undefined;
+    data: import("../../model/storefront.model").CartLineModel[] | undefined;
     error: Error | null;
     isError: boolean;
     isFetching: boolean;
@@ -73,11 +73,11 @@ export declare function useFetchCurrentCartLinesWithAtp(): {
     isPlaceholderData: boolean;
     isRefetching: boolean;
     isStale: boolean;
-    refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<import("../../model/shop.model").CartModel, Error>>;
+    refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<import("../../model/storefront.model").CartModel, Error>>;
     fetchStatus: import("@tanstack/react-query").FetchStatus;
-    promise: Promise<import("../../model/shop.model").CartModel>;
+    promise: Promise<import("../../model/storefront.model").CartModel>;
 } | {
-    data: import("../../model/shop.model").CartLineModel[] | undefined;
+    data: import("../../model/storefront.model").CartLineModel[] | undefined;
     error: Error | null;
     isError: boolean;
     isFetching: boolean;
@@ -99,11 +99,11 @@ export declare function useFetchCurrentCartLinesWithAtp(): {
     isPlaceholderData: boolean;
     isRefetching: boolean;
     isStale: boolean;
-    refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<import("../../model/shop.model").CartModel, Error>>;
+    refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<import("../../model/storefront.model").CartModel, Error>>;
     fetchStatus: import("@tanstack/react-query").FetchStatus;
-    promise: Promise<import("../../model/shop.model").CartModel>;
+    promise: Promise<import("../../model/storefront.model").CartModel>;
 } | {
-    data: import("../../model/shop.model").CartLineModel[] | undefined;
+    data: import("../../model/storefront.model").CartLineModel[] | undefined;
     error: Error | null;
     isError: boolean;
     isFetching: boolean;
@@ -125,7 +125,7 @@ export declare function useFetchCurrentCartLinesWithAtp(): {
     isPlaceholderData: boolean;
     isRefetching: boolean;
     isStale: boolean;
-    refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<import("../../model/shop.model").CartModel, Error>>;
+    refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<import("../../model/storefront.model").CartModel, Error>>;
     fetchStatus: import("@tanstack/react-query").FetchStatus;
-    promise: Promise<import("../../model/shop.model").CartModel>;
+    promise: Promise<import("../../model/storefront.model").CartModel>;
 };

package/dist/shared/api/storefront/hooks/cart/use-fetch-current-cart-lines.d.ts

@@ -1 +1 @@
-export declare function useFetchCurrentCartLines(): import("@tanstack/react-query").UseQueryResult<import("../../model/shop.model").CartLineModel[], Error>;
+export declare function useFetchCurrentCartLines(): import("@tanstack/react-query").UseQueryResult<import("../../model/storefront.model").CartLineModel[], Error>;

package/dist/shared/api/storefront/hooks/cart/use-fetch-current-cart-product-atp.d.ts

@@ -1,2 +1,2 @@
-import { ProductAtp } from '../../model/shop.model';
+import { ProductAtp } from '../../model/storefront.model';
 export declare function useFetchCurrentCartProductAtp(): import("@tanstack/react-query").UseQueryResult<ProductAtp[], Error>;

package/dist/shared/api/storefront/hooks/cart/use-fetch-current-cart-promotions.d.ts

@@ -1 +1 @@
-export declare function useFetchCurrentCartPromotions(): import("@tanstack/react-query").UseQueryResult<import("../../model/shop.model").PromotionModel[], Error>;
+export declare function useFetchCurrentCartPromotions(): import("@tanstack/react-query").UseQueryResult<import("../../model/storefront.model").PromotionModel[], Error>;

package/dist/shared/api/storefront/hooks/cart/use-fetch-current-cart-with-atp.d.ts

@@ -1,4 +1,4 @@
-import { CartModel } from '../../model/shop.model';
+import { CartModel } from '../../model/storefront.model';
 export declare function useFetchCurrentCartWithAtp<T = CartModel>({ select, }?: {
     select?: (data: CartModel) => T;
 }): {

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

@@ -1,4 +1,4 @@
-import { CartModel } from '../../model/shop.model';
+import { CartModel } from '../../model/storefront.model';
 export declare function useFetchCurrentCart<T = CartModel>({ select, }?: {
     select?: (data: CartModel) => T;
 }): import("@tanstack/react-query").UseQueryResult<T, Error>;

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

@@ -0,0 +1,6 @@
+import { CartLineModel } from '../../model/storefront.model';
+export interface PatchCartLineParams {
+    cartLine: CartLineModel;
+    cartLineId: string;
+}
+export declare function usePatchCartLineById(): import("@tanstack/react-query").UseMutationResult<void, Error, PatchCartLineParams, unknown>;

package/dist/shared/api/storefront/hooks/cart/{use-update-cart-line-by-id.js → use-patch-cart-line-by-id.js}

@@ -1,11 +1,11 @@
 import { useQueryClient, useMutation } from '@tanstack/react-query';
-import { updateCartLineById } from '../../services/cart-service.js';
+import { patchCartLineById } from '../../services/cart-service.js';
 
-function useUpdateCartLineById() {
+function usePatchCartLineById() {
     const queryClient = useQueryClient();
     return useMutation({
         mutationFn: async ({ cartLine: _cartLine, cartLineId }) => {
-            await updateCartLineById({ cartLine: _cartLine, cartLineId });
+            await patchCartLineById({ cartLine: _cartLine, cartLineId });
             // Invalidate the related current cart query cache
             queryClient.invalidateQueries({ queryKey: ['carts', 'current'] });
         },
@@ -15,4 +15,4 @@ function useUpdateCartLineById() {
     });
 }
 
-export { useUpdateCartLineById };
+export { usePatchCartLineById };

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

@@ -1,3 +1,10 @@
-export declare function usePatchCart(): ({ cart }: {
-    cart: any;
-}) => Promise<import("../../model/shop.model").CartModel>;
+export declare function usePatchCart(): {
+    isLoading: boolean;
+    mutate(args_0: {
+        cart: Partial<Omit<import("../../model/storefront.model").CartModel, "billTo"> & {
+            billTo?: import("../../model/storefront.model").BillToModel | {
+                id: string;
+            } | null;
+        }>;
+    }): Promise<import("../../model/storefront.model").CartModel>;
+};

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

@@ -1,13 +1,16 @@
-import { useQueryClient } from '@tanstack/react-query';
+import { useAwaitableMutation } from '../../../shared/hooks/use-awaitable-mutation.js';
 import { patchCart } from '../../services/cart-service.js';
 
 function usePatchCart() {
-    const queryClient = useQueryClient();
-    return async ({ cart }) => {
-        const updatedCart = await patchCart({ cart });
-        queryClient.setQueriesData({ queryKey: ['carts', updatedCart.id] }, { ...updatedCart, cartLines: cart.cartLines });
-        return updatedCart;
-    };
+    return useAwaitableMutation({
+        mutationFn: patchCart,
+        onError: (_, [{ cart }], queryClient) => {
+            queryClient.invalidateQueries({ queryKey: ['carts', cart.id] });
+        },
+        onSuccess: (updatedCart, [{ cart }], queryClient) => {
+            queryClient.setQueriesData({ queryKey: ['carts', updatedCart.id] }, { ...updatedCart, cartLines: cart.cartLines });
+        },
+    });
 }
 
 export { usePatchCart };

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

@@ -1,4 +1,4 @@
-import { CartModel } from '../../model/shop.model';
+import { CartModel } from '../../model/storefront.model';
 export declare const usePlaceOrder: () => ({ cart }: {
     cart: any;
 }) => Promise<CartModel>;

package/dist/shared/api/storefront/hooks/cart/use-save-cart-for-later.d.ts

@@ -1,4 +1,4 @@
-import { CartModel } from '../../model/shop.model';
+import { CartModel } from '../../model/storefront.model';
 interface UseSaveCartForLaterArgs {
     onError?: () => void;
     onSuccess?: () => void;

package/dist/shared/api/storefront/hooks/customer/use-fetch-bill-to-addresses.d.ts

@@ -1 +1 @@
-export declare function useFetchBillToAddresses(): import("@tanstack/react-query").UseQueryResult<import("../../model/shop.model").BillToModel[] | null, Error>;
+export declare function useFetchBillToAddresses(): import("@tanstack/react-query").UseQueryResult<import("../../model/storefront.model").BillToModel[] | null, Error>;

package/dist/shared/api/storefront/hooks/customer/use-fetch-ship-to-addresses.d.ts

@@ -1,3 +1,3 @@
 export declare function useFetchShipToAddresses({ shipToId }: {
     shipToId: string;
-}): import("@tanstack/react-query").UseQueryResult<import("../../model/shop.model").ShipToModel[] | null, Error>;
+}): import("@tanstack/react-query").UseQueryResult<import("../../model/storefront.model").ShipToModel[] | null, Error>;

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

@@ -0,0 +1,6 @@
+export declare function usePatchBillToAddress(): {
+    isLoading: boolean;
+    mutate(args_0: {
+        billTo: import("../../model/storefront.model").BillToModel;
+    }): Promise<import("../../model/storefront.model").BillToModel>;
+};

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

@@ -0,0 +1,15 @@
+import { patchBillToAddress } from '../../services/customer-service.js';
+import { useAwaitableMutation } from '../../../shared/hooks/use-awaitable-mutation.js';
+
+function usePatchBillToAddress() {
+    return useAwaitableMutation({
+        mutationFn: patchBillToAddress,
+        onComplete(_result, _error, _args, queryClient) {
+            queryClient.invalidateQueries({ queryKey: ['customer'] });
+            queryClient.invalidateQueries({ queryKey: ['carts'] });
+            queryClient.invalidateQueries({ queryKey: ['session'] });
+        },
+    });
+}
+
+export { usePatchBillToAddress };

package/dist/shared/api/storefront/hooks/payment/use-create-adyen-session.d.ts

@@ -1,3 +1,3 @@
-import { PaymentAuthenticationModel } from 'shared/api/storefront/model/shop.model';
+import { PaymentAuthenticationModel } from 'shared/api/storefront/model/storefront.model';
 import { CreateAdyenSessionParameters } from 'shared/api/storefront/services/payment-service';
 export declare function useCreateAdyenSession(): import("@tanstack/react-query").UseMutationResult<PaymentAuthenticationModel, Error, CreateAdyenSessionParameters, unknown>;

package/dist/shared/api/storefront/hooks/payment/use-fetch-adyen-config.d.ts

@@ -1 +1 @@
-export declare function useFetchAdyenConfig(): import("@tanstack/react-query").UseQueryResult<import("../../model/shop.model").AdyenSettings, Error>;
+export declare function useFetchAdyenConfig(): import("@tanstack/react-query").UseQueryResult<import("../../model/storefront.model").AdyenSettings, Error>;

package/dist/shared/api/storefront/hooks/translation/use-fetch-translations.js

@@ -7,7 +7,7 @@ function useFetchTranslations(languagCode, { enabled = true } = { enabled: true
         enabled,
         gcTime: 1 * TIME.DAY,
         queryFn: () => fetchTranslations(languagCode),
-        queryKey: ['translations'],
+        queryKey: ['translations', languagCode],
         staleTime: 1 * TIME.DAY,
     });
 }

package/dist/shared/api/storefront/hooks/website/use-fetch-countries-languages.d.ts

@@ -1,6 +1,6 @@
 export declare function useFetchCountriesLanguages({ enabled, }?: {
     enabled?: boolean;
 }): import("@tanstack/react-query").UseQueryResult<{
-    countries: import("../../model/shop.model").CountryModel[];
-    languages: import("../../model/shop.model").LanguageModel[];
+    countries: import("../../model/storefront.model").CountryModel[];
+    languages: import("../../model/storefront.model").LanguageModel[];
 }, Error>;

package/dist/shared/api/storefront/hooks/website/use-fetch-countries.d.ts

@@ -1 +1,3 @@
-export declare function useFetchCountries(): import("@tanstack/react-query").UseQueryResult<import("../../model/shop.model").CountryModel[], Error>;
+export declare function useFetchCountries({ enabled }?: {
+    enabled: boolean;
+}): import("@tanstack/react-query").UseQueryResult<import("../../model/storefront.model").CountryModel[], Error>;

package/dist/shared/api/storefront/hooks/website/use-fetch-countries.js

@@ -2,8 +2,9 @@ import { useQuery } from '@tanstack/react-query';
 import { TIME } from '../../../../utils/time.js';
 import { fetchCountries } from '../../services/website-service.js';
 
-function useFetchCountries() {
+function useFetchCountries({ enabled = true } = { enabled: true }) {
     return useQuery({
+        enabled,
         gcTime: 24 * TIME.HOUR,
         queryFn: fetchCountries,
         queryKey: ['countries'],

package/dist/shared/api/storefront/hooks/website/use-fetch-settings.d.ts

@@ -1,4 +1,4 @@
-import { SettingsCollectionModel } from '../../model/shop.model';
+import { SettingsCollectionModel } from '../../model/storefront.model';
 export declare function useFetchSettings({ enabled, }?: {
     enabled?: boolean;
 }): import("@tanstack/react-query").UseQueryResult<SettingsCollectionModel, Error>;

package/dist/shared/api/storefront/hooks/website/use-update-locale.d.ts

@@ -1,4 +1,4 @@
-import { SessionModel } from '../../model/shop.model';
+import { SessionModel } from '../../model/storefront.model';
 export declare function useUpdateLocale(): import("@tanstack/react-query").UseMutationResult<SessionModel, Error, {
     countryId: string;
     languageId: string;

package/dist/shared/api/storefront/hooks/wishlist/use-fetch-all-wishlists-items.d.ts

@@ -1,4 +1,4 @@
-import { WishListLines } from '../../model/shop.model';
+import { WishListLines } from '../../model/storefront.model';
 interface UseFetchAllWishListsItemsArgs {
     enabled?: boolean;
 }

package/dist/shared/api/storefront/hooks/wishlist/use-fetch-wishlists.d.ts

@@ -1,2 +1,2 @@
-import { WishListCollectionModel as ShopWishListCollectionModel } from '../../model/shop.model';
+import { WishListCollectionModel as ShopWishListCollectionModel } from '../../model/storefront.model';
 export declare function useFetchWishLists(): import("@tanstack/react-query").UseQueryResult<ShopWishListCollectionModel, Error>;

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

@@ -1,4 +1,4 @@
-import { AccountModel, PatchSessionModel, SessionModel, SessionModel as ShopSessionModel } from '../model/shop.model';
+import { AccountModel, PatchSessionModel, SessionModel, SessionModel as ShopSessionModel } from '../model/storefront.model';
 export declare function fetchSession(): Promise<ShopSessionModel>;
 export declare function patchSession({ session, }: {
     session: PatchSessionModel;