@sonic-equipment/ui 134.0.0 → 136.0.0

package/dist/logging/use-log-error.js

@@ -0,0 +1,12 @@
+import { useEffect } from 'react';
+import { logger } from './logger.js';
+
+function useLogError(error) {
+    return useEffect(() => {
+        if (!error)
+            return;
+        logger.error(error);
+    }, [error]);
+}
+
+export { useLogError };

package/dist/notifications/announcements/announcement-provider.js

@@ -1,8 +1,9 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { useRef, useEffect } from 'react';
+import { useRef } from 'react';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import { useCultureCode } from '../../intl/use-culture-code.js';
+import { useLogError } from '../../logging/use-log-error.js';
 import { useFetchAnnouncements } from '../../shared/api/bff/hooks/use-fetch-announcements.js';
 import { useLocalStorage } from '../../shared/hooks/use-local-storage.js';
 import { ConnectedAnnouncement } from './connected-announcement.js';
@@ -14,11 +15,7 @@ function AnnouncementProvider() {
     const { data: announcements, error } = useFetchAnnouncements({
         cultureCode,
     });
-    useEffect(() => {
-        if (!error)
-            return;
-        console.error(error);
-    }, [error]);
+    useLogError(error);
     const [dismissedIds, setDismissedIds] = useLocalStorage('dismissedAnnouncementIds', []);
     const filteredAnnouncements = announcements?.filter(({ id }) => !dismissedIds.includes(id));
     return (jsx(TransitionGroup, { className: styles['announcement-provider'], children: filteredAnnouncements?.map(announcement => (jsx(CSSTransition, { classNames: {

package/dist/pages/checkout/components/billing-and-invoice-information.js

@@ -6,7 +6,7 @@ import styles from './billing-and-invoice-information.module.css.js';
 
 function BillingAndInvoiceInformation({ billToAddress, shipToAddress, }) {
     const t = useFormattedMessage();
-    return (jsxs("div", { className: styles['billing-and-invoice-information'], children: [jsx("section", { className: styles.section, children: jsx(InfoDisplay, { id: "billing-address", label: t('Billing address'), value: jsx(Address, { ...billToAddress }) }) }), jsx("section", { className: styles.section, children: jsx(InfoDisplay, { id: "shipping-address", label: t('Shipping address'), value: jsx(Address, { ...shipToAddress }) }) })] }));
+    return (jsxs("div", { className: styles['billing-and-invoice-information'], children: [jsx("section", { className: styles.section, children: jsx(InfoDisplay, { id: "billing-address", label: t('Billing address'), value: jsx(Address, { address: billToAddress, "data-test-selector": "orderConfirmationBillingInformation" }) }) }), jsx("section", { className: styles.section, children: jsx(InfoDisplay, { id: "shipping-address", label: t('Shipping address'), value: jsx(Address, { address: shipToAddress, "data-test-selector": "orderConfirmationShippingInformation" }) }) })] }));
 }
 
 export { BillingAndInvoiceInformation };

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

@@ -40,7 +40,7 @@ function OrderConfirmationPageContent({ cart, }) {
         },
     });
     return (jsx(Page, { breadCrumb: [{ href: CHECKOUT_PATHS.HOME, label: t('Home') }], title: t('Order confirmation'), children: jsx(CheckoutPageLayout, { actions: {
-                primary: (jsx(RouteButton, { withArrow: true, "data-test-selector": "checkoutShippingCartTotalContinueButton", href: "/", children: jsx(FormattedMessage, { id: "Continue shopping" }) })),
+                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 });
                             }, variant: "outline", children: jsx(FormattedMessage, { id: "Save order" }) })), jsx(PrintButton, {})] })),

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

@@ -42,34 +42,44 @@ function AdyenPayment({ amount, cartId, countryCode, currencyCode, customerId, d
                 if (!state.details.redirectResult) {
                     return onError(new Error('No redirectResult'), null);
                 }
-                const result = await getAdyenPaymentDetails({
-                    redirectResult: state.details.redirectResult,
-                });
-                if (amount.toFixed(2).replaceAll(/[,.]/gi, '') !== adyenAmount)
-                    return onError(new Error('Invalid amount'), result);
-                if (customerId !== adyenCustomerId)
-                    return onError(new Error('Invalid customer'), result);
-                return handlePaymentResponse(result, onComplete, onError);
+                try {
+                    const result = await getAdyenPaymentDetails({
+                        redirectResult: state.details.redirectResult,
+                    });
+                    if (amount.toFixed(2).replaceAll(/[,.]/gi, '') !== adyenAmount)
+                        return onError(new Error('Invalid amount'), result);
+                    if (customerId !== adyenCustomerId)
+                        return onError(new Error('Invalid customer'), result);
+                    return handlePaymentResponse(result, onComplete, onError);
+                }
+                catch (error) {
+                    return onError(error, null);
+                }
             }),
             onSubmit: (async (state, _component) => {
-                dropinDivRef.current?.classList.add(styles.loading);
-                if (state.data.paymentMethod.type === 'paybybank') {
-                    state.data.countryCode = countryCode;
-                }
-                const result = await postAdyenPayment({
-                    currencyCode,
-                    data: state.data,
-                    orderAmount,
-                    returnUrl,
-                    webOrderNumber: adyenSession.webOrderNumber,
-                });
-                if (result.action) {
-                    if (result.action.type === 'redirect') {
-                        return handleRedirectPaymentAction(result);
+                try {
+                    dropinDivRef.current?.classList.add(styles.loading);
+                    if (state.data.paymentMethod.type === 'paybybank') {
+                        state.data.countryCode = countryCode;
+                    }
+                    const result = await postAdyenPayment({
+                        currencyCode,
+                        data: state.data,
+                        orderAmount,
+                        returnUrl,
+                        webOrderNumber: adyenSession.webOrderNumber,
+                    });
+                    if (result.action) {
+                        if (result.action.type === 'redirect') {
+                            return handleRedirectPaymentAction(result);
+                        }
+                        return onError(new Error('Invalid payment response'), result);
                     }
-                    return onError(new Error('Invalid payment response'), result);
+                    return handlePaymentResponse(result, onComplete, onError);
+                }
+                catch (error) {
+                    return onError(error, null);
                 }
-                return handlePaymentResponse(result, onComplete, onError);
             }),
             session: {
                 ...adyenSession,

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

@@ -12,7 +12,9 @@ import { TextField } from '../../../../forms/text-field/text-field.js';
 import { InfoIconTooltip } from '../../../../info-icon-tooltip/info-icon-tooltip.js';
 import { FormattedMessage } from '../../../../intl/formatted-message.js';
 import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
+import { logger } from '../../../../logging/logger.js';
 import { usePatchSession } from '../../../../shared/api/storefront/hooks/authentication/use-patch-session.js';
+import { useInvalidateCurrentCart } from '../../../../shared/api/storefront/hooks/cart/use-invalidate-current-cart.js';
 import { usePatchCart } from '../../../../shared/api/storefront/hooks/cart/use-patch-cart.js';
 import { usePlaceOrder } from '../../../../shared/api/storefront/hooks/cart/use-place-order.js';
 import { useInvalidateAdyen } from '../../../../shared/api/storefront/hooks/payment/use-invalidate-adyen.js';
@@ -27,10 +29,13 @@ 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();
+    const { isLoading: isPatchingCart, mutate: patchCart } = usePatchCart({
+        skipInvalidation: true,
+    });
     const { isLoading: isPatchingSession } = usePatchSession();
     const { isLoading: isPlacingCart, mutate: placeOrder } = usePlaceOrder();
     const { sendPurchaseEventFromPaymentPage } = useAlgoliaInsights();
+    const invalidateCurrentCart = useInvalidateCurrentCart();
     const dropinRef = useRef(null);
     const [paymentError, setPaymentError] = useState();
     const [apiError, setAPIError] = useState();
@@ -151,7 +156,7 @@ function Payment({ atp, cart: _cart, form, onError: _onError, onPaymentComplete,
         if (isAdyenPayment) {
             /* Adyen Payment */
             if (!dropinRef.current) {
-                console.warn('Adyen Dropin not ready');
+                logger.warn('Adyen Dropin not ready');
                 return;
             }
             dropinRef.current.showValidation();
@@ -168,20 +173,26 @@ function Payment({ atp, cart: _cart, form, onError: _onError, onPaymentComplete,
                 requestedDeliveryDate: formData.get('deliveryDate')?.toString(),
             };
             try {
-                cartRef.current = await patchCart({
-                    cart: updatedCart,
-                });
-            }
-            catch (error) {
-                console.error(error);
-                setAPIError(error);
-            }
-            try {
-                dropinRef.current.submit();
+                try {
+                    cartRef.current = await patchCart({
+                        cart: updatedCart,
+                    });
+                }
+                catch (error) {
+                    setAPIError(error);
+                    throw error;
+                }
+                try {
+                    dropinRef.current.submit();
+                }
+                catch (error) {
+                    setPaymentError(error);
+                    throw error;
+                }
             }
             catch (error) {
-                console.error(error);
-                setPaymentError(error);
+                logger.error(error);
+                invalidateCurrentCart();
             }
         }
         else {
@@ -196,8 +207,9 @@ function Payment({ atp, cart: _cart, form, onError: _onError, onPaymentComplete,
                 return onPaymentComplete({ cartId: cart.trackId });
             }
             catch (error) {
-                console.error(error);
+                logger.error(error);
                 setPaymentError(error);
+                invalidateCurrentCart();
             }
         }
     }
@@ -224,7 +236,7 @@ function Payment({ atp, cart: _cart, form, onError: _onError, onPaymentComplete,
             return onPaymentComplete({ cartId: cart.trackId });
         }
         catch (error) {
-            console.error(error);
+            logger.error(error);
             setAPIError(error);
         }
     }, [onPaymentComplete, onPlaceOrderCompleted, placeOrder]);
@@ -232,7 +244,7 @@ function Payment({ atp, cart: _cart, form, onError: _onError, onPaymentComplete,
         invalidateAdyen();
         // invalidateCurrentCart()
         setPaymentError(error);
-        console.error(error);
+        logger.error(error);
         _onError?.(error, result);
     }, [_onError, invalidateAdyen]);
     return (jsxs(Form, { className: styles['payment-form'], "data-test-selector": "paymentForm", id: form, onSubmit: e => {

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

@@ -22,7 +22,7 @@ function PaymentPageContent({ atp, cart, formId, hasAtp, isProcessing, isValidat
                 label: t('Review and payment'),
             },
         ], title: t('Review and payment'), children: jsxs(CheckoutPageLayout, { actions: {
-                primary: (jsx(Button, { withArrow: true, "data-test-selector": "checkoutShippingCartTotalContinueButton", form: formId, isDisabled: isProcessing, isLoading: isProcessing ? (jsx(FormattedMessage, { id: "Processing" })) : isValidating ? (jsx(FormattedMessage, { id: "Validating" })) : (false), type: "submit", children: jsx(FormattedMessage, { id: "Pay" }) })),
+                primary: (jsx(Button, { withArrow: true, "data-test-selector": "checkoutReviewAndSubmit_placeOrder", form: formId, isDisabled: isProcessing, isLoading: isProcessing ? (jsx(FormattedMessage, { id: "Processing" })) : isValidating ? (jsx(FormattedMessage, { id: "Validating" })) : (false), type: "submit", children: jsx(FormattedMessage, { id: "Pay" }) })),
             }, mobileSummary: jsx(CartTotalsSummary, { totalAmount: cart.orderGrandTotalDisplay }), overview: jsx(CartTotals, { deliveryDate: hasAtp ? undefined : cart.requestedDeliveryDate, fulfillmentMethod: cart.fulfillmentMethod, isPayByInvoice: (cart.paymentOptions?.paymentMethods?.length || 1) <= 1 &&
                     cart.paymentMethod?.name === 'PBI', shippingCost: cart.shippingAndHandlingDisplay, subtotal: cart.orderSubTotalDisplay, tax: cart.totalTaxDisplay, total: cart.orderGrandTotalDisplay, vatPercentage: cart.cartLines?.[0]?.pricing?.vatRate || 0 }), children: [jsx(CheckoutPageSection, { hasBorder: false, title: jsx(FormattedMessage, { id: "Payment" }), children: jsx(CheckoutPageSectionContent, { children: jsx(Payment, { atp: atp, cart: cart, form: formId, onPaymentComplete: onPaymentComplete, onProcessing: setIsProcessing, onValidating: setIsValidating }) }) }), jsx(CheckoutPageSection, { hasBorder: false, title: jsx(FormattedMessage, { id: "Order" }), children: jsx(CheckoutPageSectionContent, { stretch: true, children: jsx(OrderLineList, { children: cart.cartLines?.map(cartLine => (jsx(OrderLineCard, { deliveryDate: cartLine.atp?.date, href: cartLine.productUri, image: {
                                     fit: 'contain',

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

@@ -1,4 +1,4 @@
-import { CountryModel } from '../../../../shared/api/storefront/model/storefront.model';
+import { BillToModel, CountryModel } from '../../../../shared/api/storefront/model/storefront.model';
 export declare const EDIT_ADDRESS_FORM_ID = "billToForm";
 interface Address {
     address1: string;
@@ -13,7 +13,8 @@ interface Address {
     phone: string;
     postalCode: string;
 }
-export declare function EditAddresses({ countries, isLoading, isPickup, onSubmit, }: {
+export declare function EditAddresses({ billTo, countries, isLoading, isPickup, onSubmit, }: {
+    billTo: BillToModel | undefined | null;
     countries: CountryModel[];
     isLoading: boolean;
     isPickup: boolean;

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

@@ -15,10 +15,10 @@ import { SonicAddress } from './sonic-address.js';
 import styles from './edit-address.module.css.js';
 
 const EDIT_ADDRESS_FORM_ID = 'billToForm';
-function EditAddresses({ countries, isLoading, isPickup, onSubmit, }) {
+function EditAddresses({ billTo, countries, isLoading, isPickup, onSubmit, }) {
     const t = useFormattedMessage();
-    const [companyName, setCompanyName] = useState('');
-    const [lastName, setLastName] = useState('');
+    const [companyName, setCompanyName] = useState(billTo?.companyName || '');
+    const [lastName, setLastName] = useState(billTo?.lastName || '');
     const { data: cart } = useFetchCurrentCart();
     return (jsxs(Fragment, { children: [jsx(CheckoutPageSection, { title: jsx(FormattedMessage, { id: "Billing address" }), children: jsx(CheckoutPageSectionContent, { children: jsxs(Form, { className: styles.form, "data-test-selector": "billToAddressForm", id: EDIT_ADDRESS_FORM_ID, onSubmit: e => {
                             e.preventDefault();
@@ -43,7 +43,7 @@ function EditAddresses({ countries, isLoading, isPickup, onSubmit, }) {
                                 },
                                 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 }, `lastname-${Boolean(companyName)}`), 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, "data-test-selector": "countrySelect", isDisabled: isLoading, name: "countrySelect" }) }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { isRequired: true, 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", 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 => {
                                         if (!value)
                                             return value;
                                         return (validatePhone(value) ||
@@ -53,7 +53,7 @@ function EditAddresses({ countries, isLoading, isPickup, onSubmit, }) {
                                             return value;
                                         return (validateEmail(value) ||
                                             t('Please enter a valid e-mail address'));
-                                    } }) }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { 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.') })] })) }) }) })] }));
+                                    } }) }), 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 };

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

@@ -22,7 +22,31 @@ function ReadOnlyAddresses({ billTo, isLoading, isPickup, notes, onSubmit, shipT
             onSubmit({
                 notes: formData.get('notes')?.toString() || '',
             });
-        }, children: [jsxs(CheckoutPageSection, { title: jsx(FormattedMessage, { id: "Billing address" }), children: [jsx(CheckoutPageSectionLink, { children: jsxs(RouteLink, { color: "secondary", href: ACCOUNT_ADDRESSES_PATH, isDisabled: isLoading, children: [jsx(FormattedMessage, { id: "Edit billing address" }), " >"] }) }), jsxs(CheckoutPageSectionContent, { children: [billTo && (jsx(Address, { address1: billTo.address1, address2: billTo.address2, address3: billTo.address3, city: billTo.city, companyName: billTo.companyName, country: billTo.country?.name, email: billTo.email, firstName: billTo.firstName, lastName: billTo.lastName, 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(CheckoutPageSection, { title: jsx(FormattedMessage, { id: isPickup ? 'Pickup address' : 'Shipping address' }), children: [!isPickup && (jsx(CheckoutPageSectionLink, { children: jsxs(RouteLink, { color: "secondary", href: ACCOUNT_ADDRESSES_PATH, isDisabled: isLoading, children: [jsx(FormattedMessage, { id: "Edit shipping address" }), " >"] }) })), jsx(CheckoutPageSectionContent, { children: isPickup ? (jsx(SonicAddress, {})) : (jsxs(Fragment, { children: [jsx(Checkbox, { className: styles['use-invoice-checkbox'], "data-test-selector": "checkboxUseBillingAddress", isDisabled: true, isSelected: true, children: jsx(FormattedMessage, { id: "Use billing address" }) }), shipTo && (jsx(Address, { address1: shipTo.address1, address2: shipTo.address2, address3: shipTo.address3, city: shipTo.city, companyName: shipTo.companyName, country: shipTo.country?.name, email: shipTo.email, firstName: shipTo.firstName, lastName: shipTo.lastName, phone: shipTo.phone, postalCode: shipTo.postalCode }))] })) })] })] }));
+        }, children: [jsxs(CheckoutPageSection, { title: jsx(FormattedMessage, { id: "Billing address" }), children: [jsx(CheckoutPageSectionLink, { children: jsxs(RouteLink, { color: "secondary", href: ACCOUNT_ADDRESSES_PATH, isDisabled: isLoading, children: [jsx(FormattedMessage, { id: "Edit billing address" }), " >"] }) }), jsxs(CheckoutPageSectionContent, { children: [billTo && (jsx(Address, { address: {
+                                    address1: billTo.address1,
+                                    address2: billTo.address2,
+                                    address3: billTo.address3,
+                                    city: billTo.city,
+                                    companyName: billTo.companyName,
+                                    country: billTo.country?.name,
+                                    email: billTo.email,
+                                    firstName: billTo.firstName,
+                                    lastName: billTo.lastName,
+                                    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(CheckoutPageSection, { title: jsx(FormattedMessage, { id: isPickup ? 'Pickup address' : 'Shipping address' }), children: [!isPickup && (jsx(CheckoutPageSectionLink, { children: jsxs(RouteLink, { color: "secondary", href: ACCOUNT_ADDRESSES_PATH, isDisabled: isLoading, children: [jsx(FormattedMessage, { id: "Edit shipping address" }), " >"] }) })), jsx(CheckoutPageSectionContent, { children: isPickup ? (jsx(SonicAddress, {})) : (jsxs(Fragment, { children: [jsx(Checkbox, { className: styles['use-invoice-checkbox'], "data-test-selector": "checkboxUseBillingAddress", isDisabled: true, isSelected: true, children: jsx(FormattedMessage, { id: "Use billing address" }) }), shipTo && (jsx(Address, { address: {
+                                        address1: shipTo.address1,
+                                        address2: shipTo.address2,
+                                        address3: shipTo.address3,
+                                        city: shipTo.city,
+                                        companyName: shipTo.companyName,
+                                        country: shipTo.country?.name,
+                                        email: shipTo.email,
+                                        firstName: shipTo.firstName,
+                                        lastName: shipTo.lastName,
+                                        phone: shipTo.phone,
+                                        postalCode: shipTo.postalCode,
+                                    } }))] })) })] })] }));
 }
 
 export { ReadOnlyAddresses };

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

@@ -5,10 +5,11 @@ export interface ShippingPageContentProps {
     editAddress: ReactNode;
     errorPatchBillingAddress?: unknown;
     fulfillmentMethods: string[] | undefined;
+    isGuest: boolean;
     isLoadingFulfillmentMethods: boolean;
     isPatching: boolean;
     isPatchingSession: boolean;
     onChangeFulfillmentMethod: (value: string) => void;
     readOnlyAddress: ReactNode;
 }
-export declare function ShippingPageContent({ cart, editAddress, errorPatchBillingAddress, fulfillmentMethods, isLoadingFulfillmentMethods, isPatching, isPatchingSession, onChangeFulfillmentMethod, readOnlyAddress, }: ShippingPageContentProps): import("react/jsx-runtime").JSX.Element;
+export declare function ShippingPageContent({ cart, editAddress, errorPatchBillingAddress, fulfillmentMethods, isGuest, isLoadingFulfillmentMethods, isPatching, isPatchingSession, onChangeFulfillmentMethod, readOnlyAddress, }: ShippingPageContentProps): import("react/jsx-runtime").JSX.Element;

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

@@ -14,7 +14,7 @@ import { CheckoutPageSectionContent } from '../layouts/checkout-page-layout/comp
 import { EDIT_ADDRESS_FORM_ID } from './components/edit-address.js';
 import styles from './shipping-page.module.css.js';
 
-function ShippingPageContent({ cart, editAddress, errorPatchBillingAddress, fulfillmentMethods, isLoadingFulfillmentMethods, isPatching, isPatchingSession, onChangeFulfillmentMethod, readOnlyAddress, }) {
+function ShippingPageContent({ cart, editAddress, errorPatchBillingAddress, fulfillmentMethods, isGuest, isLoadingFulfillmentMethods, isPatching, isPatchingSession, onChangeFulfillmentMethod, readOnlyAddress, }) {
     const t = useFormattedMessage();
     const fulfillmentMethodOptions = fulfillmentMethods?.reduce((acc, method) => ({
         ...acc,
@@ -34,7 +34,7 @@ function ShippingPageContent({ cart, editAddress, errorPatchBillingAddress, fulf
                 primary: (jsx(Button, { withArrow: true, "data-test-selector": "checkoutShippingCartTotalContinueButton", form: EDIT_ADDRESS_FORM_ID, isDisabled: isPatching, isLoading: isPatching || isPatchingSession ? (jsx(FormattedMessage, { id: "Updating address" })) : undefined, type: "submit", children: jsx(FormattedMessage, { id: "Continue shopping" }) })),
             }, mobileSummary: jsx(CartTotalsSummary, { totalAmount: cart.orderGrandTotalDisplay }), overview: jsx(CartTotals, { fulfillmentMethod: fulfillmentMethods && fulfillmentMethods.length === 1
                     ? cart.fulfillmentMethod
-                    : undefined, shippingCost: cart.shippingAndHandlingDisplay, subtotal: cart.orderSubTotalDisplay, tax: cart.totalTaxDisplay, total: cart.orderGrandTotalDisplay, vatPercentage: cart.cartLines?.[0]?.pricing?.vatRate }), children: [jsxs(Fragment, { children: [fulfillmentMethods && fulfillmentMethods.length > 1 && (jsx(CheckoutPageSection, { hasBorder: true, title: t('Fulfillment method'), children: jsx(CheckoutPageSectionContent, { children: jsx("div", { className: styles['fulfillment-select-wrapper'], children: jsx(Select, { isRequired: true, showLabel: true, "data-test-selector": "fulfillmentMethodSelect", defaultSelectedOption: cart.fulfillmentMethod, isLoading: isLoadingFulfillmentMethods, label: t('Fulfillment method'), name: "fulfillmentMethod", onChange: onChangeFulfillmentMethod, options: fulfillmentMethodOptions || {}, variant: "solid" }) }) }) })), hasBillToAddress ? readOnlyAddress : editAddress] }), Boolean(errorPatchBillingAddress) && (jsx("div", { className: styles['error-message'], children: jsx(FormattedMessage, { id: "An unexpected error occured" }) }))] }) }));
+                    : undefined, shippingCost: cart.shippingAndHandlingDisplay, subtotal: cart.orderSubTotalDisplay, tax: cart.totalTaxDisplay, total: cart.orderGrandTotalDisplay, vatPercentage: cart.cartLines?.[0]?.pricing?.vatRate }), children: [jsxs(Fragment, { children: [fulfillmentMethods && fulfillmentMethods.length > 1 && (jsx(CheckoutPageSection, { hasBorder: true, title: t('Fulfillment method'), children: jsx(CheckoutPageSectionContent, { children: jsx("div", { className: styles['fulfillment-select-wrapper'], children: jsx(Select, { isRequired: true, showLabel: true, "data-test-selector": "fulfillmentMethodSelect", defaultSelectedOption: cart.fulfillmentMethod, isLoading: isLoadingFulfillmentMethods, label: t('Fulfillment method'), name: "fulfillmentMethod", onChange: onChangeFulfillmentMethod, options: fulfillmentMethodOptions || {}, variant: "solid" }) }) }) })), hasBillToAddress && !isGuest ? readOnlyAddress : editAddress] }), Boolean(errorPatchBillingAddress) && (jsx("div", { className: styles['error-message'], children: jsx(FormattedMessage, { id: "An unexpected error occured" }) }))] }) }));
 }
 
 export { ShippingPageContent };

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

@@ -75,13 +75,14 @@ function ShippingPage() {
     if (isLoading || isNavigating || isError || isSuccess)
         return jsx(LoadingPage, {});
     if (!isAuthenticated ||
+        hasNo(session) ||
         hasNo(cart) ||
         hasNo(cart.cartLines) ||
         cart.cartLines.length === 0 ||
         hasNo(cart.billTo) ||
         (hasNo(cart.billTo.address1) && hasNo(countries)))
         return null;
-    return (jsx(ShippingPageContent, { cart: cart, editAddress: jsx(EditAddresses, { countries: countries || [], isLoading: isPatching, isPickup: isPickup, onSubmit: async ({ address, notes }) => {
+    return (jsx(ShippingPageContent, { cart: cart, editAddress: jsx(EditAddresses, { billTo: cart.billTo, countries: countries || [], isLoading: isPatching, isPickup: isPickup, onSubmit: async ({ address, notes }) => {
                 if (!cart.billTo)
                     return;
                 await patchShippingDetails({
@@ -93,7 +94,7 @@ function ShippingPage() {
                     cart,
                     event: { event: 'add_shipping_info' },
                 }));
-            } }), errorPatchBillingAddress: errorPatchBillingAddress, fulfillmentMethods: fulfillmentMethods, isLoadingFulfillmentMethods: isLoadingFulfillmentMethods, isPatching: isPatching, isPatchingSession: isPatchingSession, onChangeFulfillmentMethod: async (value) => {
+            } }), errorPatchBillingAddress: errorPatchBillingAddress, fulfillmentMethods: fulfillmentMethods, isGuest: session.isGuest, isLoadingFulfillmentMethods: isLoadingFulfillmentMethods, isPatching: isPatching, isPatchingSession: isPatchingSession, onChangeFulfillmentMethod: async (value) => {
             await patchSession({
                 session: {
                     ...session,

package/dist/pages/product/search-result-page/search-results-page.js

@@ -37,7 +37,7 @@ function SearchResultsPageContent({ keyword }) {
     const { hits, isLoading } = useAlgoliaHits();
     const hasHits = hits.length > 0;
     const t = useFormattedMessage();
-    return (jsxs(Fragment, { children: [isLoading !== false && !hasHits && jsx(LoadingPage, {}), isLoading === false && !hasHits && (jsx(NoResults, { content: jsxs("p", { children: [jsx(FormattedMessage, { id: "You could try checking the spelling of your search query" }), jsx("br", {}), jsx(FormattedMessage, { id: "Try another search" }), jsx("br", {}), jsx(FormattedMessage, { id: "Are you looking for information about our service? Please visit our customer support page" })] }), title: t("Unfortnately, We found no articles for your search '{0}'", {
+    return (jsxs(Fragment, { children: [isLoading !== false && !hasHits && jsx(LoadingPage, {}), isLoading === false && !hasHits && (jsx(NoResults, { content: jsxs(Fragment, { children: [jsx(FormattedMessage, { id: "You could try checking the spelling of your search query" }), jsx("br", {}), jsx(FormattedMessage, { id: "Try another search" }), jsx("br", {}), jsx(FormattedMessage, { id: "Are you looking for information about our service? Please visit our customer support page" })] }), title: t("Unfortnately, We found no articles for your search '{0}'", {
                     replacementValues: { 0: keyword },
                 }) })), jsxs("div", { style: {
                     display: hasHits ? undefined : 'none',

package/dist/shared/ga/data-layer.js

@@ -1,8 +1,9 @@
+import { logger } from '../../logging/logger.js';
+
 const _dataLayer = [];
 _dataLayer.push = (function (_push) {
     return (...items) => {
-        // eslint-disable-next-line no-console
-        console.log('dataLayer.push', items.length === 1 ? items[0] : items);
+        logger.info('dataLayer.push', items.length === 1 ? items[0] : items);
         return _push(...items);
     };
 })(_dataLayer.push.bind(_dataLayer));

package/dist/shared/providers/global-state-provider.js

@@ -73,11 +73,9 @@ function useGlobalState(key, initialState) {
             state.removeEventListener('stateChanged', updateState);
         };
     }, [state]);
-    function updateGlobalState(valueOrFn) {
-        state.value =
-            valueOrFn instanceof Function ? valueOrFn(state.value) : valueOrFn;
-    }
-    return [rerenderState, useCallback(updateGlobalState, [updateGlobalState])];
+    const setGlobalState = useCallback((valueOrFn) => (state.value =
+        valueOrFn instanceof Function ? valueOrFn(state.value) : valueOrFn), [state]);
+    return [rerenderState, setGlobalState];
 }
 
 export { GlobalStateProvider, GlobalStateProviderContext, useGlobalState };

package/dist/shared/utils/debug.d.ts

@@ -0,0 +1,2 @@
+export declare function trackPropertyChange(name: string, value: unknown): void;
+export declare function trackPropertyChange(obj: Record<string, unknown>): void;

package/dist/shared/utils/debug.js

@@ -0,0 +1,21 @@
+import { logger } from '../../logging/logger.js';
+
+const prevState = {};
+function trackPropertyChange(name, value) {
+    if (typeof name === 'string') {
+        if (value === prevState[name]) {
+            logger.info(name, value === prevState[name]);
+        }
+        else {
+            logger.warn(name, value === prevState[name]);
+        }
+        prevState[name] = value;
+    }
+    else {
+        for (const [key, value] of Object.entries(name)) {
+            trackPropertyChange(key, value);
+        }
+    }
+}
+
+export { trackPropertyChange };

package/dist/shared/utils/environment.js

@@ -1,3 +1,5 @@
+import { logger } from '../../logging/logger.js';
+
 const environments = [
     'marketingLocal',
     'sandbox',
@@ -26,7 +28,7 @@ function getEnvironment() {
     }
     else if (typeof window === 'undefined') {
         environmentUrl = 'production';
-        console.error('Unable to detect environment url');
+        logger.error('Unable to detect environment url');
     }
     else {
         environmentUrl = `${window.location.hostname}:${window.location.port}`;
@@ -52,7 +54,7 @@ function getEnvironment() {
     }
     else {
         environment = 'production';
-        console.error(`Environment not detected for url ${environmentUrl}. Defaulting to production.`);
+        logger.error(`Environment not detected for url ${environmentUrl}. Defaulting to production.`);
     }
     return environment;
 }