@sonic-equipment/ui 132.0.0 → 134.0.0

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

@@ -4,10 +4,11 @@ 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 { 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 { useFetchCurrentCart } from '../../../../shared/api/storefront/hooks/cart/use-fetch-current-cart.js';
 import { validatePhone, validateEmail } from '../../../../shared/model/address.js';
-import { Tooltip } from '../../../../tooltip/tooltip.js';
 import { CheckoutPageSection } from '../../layouts/checkout-page-layout/components/checkout-page-section.js';
 import { CheckoutPageSectionContent } from '../../layouts/checkout-page-layout/components/checkout-page-section-content.js';
 import { SonicAddress } from './sonic-address.js';
@@ -18,10 +19,11 @@ function EditAddresses({ countries, isLoading, isPickup, onSubmit, }) {
     const t = useFormattedMessage();
     const [companyName, setCompanyName] = useState('');
     const [lastName, setLastName] = useState('');
+    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();
                             const formData = new FormData(e.currentTarget);
-                            const countryFormValue = formData.get('country')?.toString();
+                            const countryFormValue = formData.get('countrySelect')?.toString();
                             const country = countries.find(country => country.id === countryFormValue);
                             if (!country)
                                 throw new Error(`Country not found ${formData.get('country')}`);
@@ -41,15 +43,17 @@ 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", 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, { 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 => {
                                         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 => {
+                                        return (validatePhone(value) ||
+                                            t('Please enter a valid phone number'));
+                                    } }) }), jsx("div", { className: styles['span-2'], children: jsx(TextField, { isRequired: true, defaultValue: cart?.billTo?.email || '', 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 }) })] }) }) }), 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(Tooltip, { text: t('Changing your address is currently not possible. Please contact customer support to change your address.') })] })) }) }) })] }));
+                                        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.') })] })) }) }) })] }));
 }
 
 export { EDIT_ADDRESS_FORM_ID, EditAddresses };

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

@@ -0,0 +1,12 @@
+import { BillToModel, CartModel } from '../../../../shared/api/storefront/model/storefront.model';
+export declare function usePatchShippingDetails(): {
+    error: unknown;
+    isError: boolean;
+    isLoading: boolean;
+    isSuccess: boolean;
+    mutate: (args_0: {
+        billTo?: BillToModel;
+        cart: CartModel;
+        notes: string | undefined;
+    }) => Promise<void>;
+};

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

@@ -0,0 +1,21 @@
+import { useAwaitableMutation } from '../../../../shared/api/shared/hooks/use-awaitable-mutation.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));
+        },
+        onSuccess: ({ queryClient }) => {
+            queryClient.removeQueries({ queryKey: ['customer'] });
+            queryClient.removeQueries({ queryKey: ['carts'] });
+            queryClient.removeQueries({ queryKey: ['session'] });
+        },
+    });
+}
+
+export { usePatchShippingDetails };

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

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { CartModel } from '../../../shared/api/storefront/model/storefront.model';
+export interface ShippingPageContentProps {
+    cart: CartModel;
+    editAddress: ReactNode;
+    errorPatchBillingAddress?: unknown;
+    fulfillmentMethods: string[] | undefined;
+    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;

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

@@ -0,0 +1,40 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useMemo } 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 { Select } from '../../../forms/select/select.js';
+import { FormattedMessage } from '../../../intl/formatted-message.js';
+import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
+import { Page } from '../../components/page/page.js';
+import { CHECKOUT_PATHS } from '../constants.js';
+import { CheckoutPageLayout } from '../layouts/checkout-page-layout/checkout-page-layout.js';
+import { CheckoutPageSection } from '../layouts/checkout-page-layout/components/checkout-page-section.js';
+import { CheckoutPageSectionContent } from '../layouts/checkout-page-layout/components/checkout-page-section-content.js';
+import { EDIT_ADDRESS_FORM_ID } from './components/edit-address.js';
+import styles from './shipping-page.module.css.js';
+
+function ShippingPageContent({ cart, editAddress, errorPatchBillingAddress, fulfillmentMethods, isLoadingFulfillmentMethods, isPatching, isPatchingSession, onChangeFulfillmentMethod, readOnlyAddress, }) {
+    const t = useFormattedMessage();
+    const fulfillmentMethodOptions = fulfillmentMethods?.reduce((acc, method) => ({
+        ...acc,
+        [method]: t(`fulfillmentMethod.${method}`),
+    }), {});
+    const hasBillToAddress = useMemo(() => {
+        return Boolean(cart.billTo?.address1);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [Boolean(cart)]);
+    return (jsx(Page, { breadCrumb: [
+            { href: CHECKOUT_PATHS.HOME, label: t('Home') },
+            {
+                href: CHECKOUT_PATHS.CHECKOUT_SHIPPING,
+                label: t('Shipping details'),
+            },
+        ], title: t('Shipping details'), children: jsxs(CheckoutPageLayout, { actions: {
+                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" }) }))] }) }));
+}
+
+export { ShippingPageContent };

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

@@ -1,69 +1,36 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useMemo, 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 { Select } from '../../../forms/select/select.js';
-import { FormattedMessage } from '../../../intl/formatted-message.js';
-import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
-import { useAwaitableMutation } from '../../../shared/api/shared/hooks/use-awaitable-mutation.js';
+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';
 import { useFetchCountries } from '../../../shared/api/storefront/hooks/website/use-fetch-countries.js';
-import { patchCart } from '../../../shared/api/storefront/services/cart-service.js';
-import { patchBillToAddress } from '../../../shared/api/storefront/services/customer-service.js';
+import { useDataLayer } from '../../../shared/ga/use-data-layer.js';
 import { useNavigate } from '../../../shared/routing/route-provider.js';
 import { hasNo } from '../../../shared/utils/types.js';
-import { Page } from '../../components/page/page.js';
 import { ErrorPage } from '../../error-page/error-page.js';
 import { LoadingPage } from '../../loading-page/loading-page.js';
-import { CheckoutPageLayout } from '../layouts/checkout-page-layout/checkout-page-layout.js';
-import { CheckoutPageSection } from '../layouts/checkout-page-layout/components/checkout-page-section.js';
-import { CheckoutPageSectionContent } from '../layouts/checkout-page-layout/components/checkout-page-section-content.js';
-import { EDIT_ADDRESS_FORM_ID, EditAddresses } from './components/edit-address.js';
+import { CHECKOUT_PATHS } from '../constants.js';
+import { EditAddresses } from './components/edit-address.js';
 import { ReadOnlyAddresses } from './components/readonly-address.js';
-import styles from './shipping-page.module.css.js';
+import { usePatchShippingDetails } from './hooks/use-patch-shipping-details.js';
+import { ShippingPageContent } from './shipping-page-content.js';
 
-const REVIEW_AND_SUBMIT_PATH = '/CheckoutReviewAndSubmit';
-function usePatchCartAndBillingAddress() {
-    return useAwaitableMutation({
-        mutationFn: async ({ billTo, cart, notes, }) => {
-            await Promise.all([
-                billTo && patchBillToAddress({ billTo }),
-                patchCart({ cart: { ...cart, notes } }),
-            ].filter(Boolean));
-        },
-        onSuccess: ({ queryClient }) => {
-            queryClient.removeQueries({ queryKey: ['customer'] });
-            queryClient.removeQueries({ queryKey: ['carts'] });
-            queryClient.removeQueries({ queryKey: ['session'] });
-        },
-    });
-}
 function ShippingPage() {
     const isAuthenticated = useIsAuthenticated();
-    const { data: cart, error, isLoading: isLoadingCart, refetch: refetchCart, } = useFetchCurrentCart();
+    const { createEcommerceEvent, dataLayer } = useDataLayer();
+    const gaEventPushed = useRef(false);
+    const { data: cart, error: errorFetchCart, isLoading: isLoadingCart, refetch: refetchCart, } = useFetchCurrentCart();
     const { data: countries, isLoading: isLoadingCountries } = useFetchCountries({
         enabled: hasNo(cart?.billTo?.address1),
     });
     const { data: session } = useFetchSession();
     const { data: fulfillmentMethods, isLoading: isLoadingFulfillmentMethods } = useFetchFulfillmentMethodsForCurrentCart();
     const { isLoading: isPatchingSession, mutate: patchSession } = usePatchSession();
-    const { isError, isLoading: isPatching, isSuccess, mutate: patchCartAndBillingAddress, } = usePatchCartAndBillingAddress();
+    const { error: errorPatchBillingAddress, isError, isLoading: isPatching, isSuccess, mutate: patchShippingDetails, } = usePatchShippingDetails();
     const isLoading = isLoadingCart || isLoadingCountries || isLoadingFulfillmentMethods;
-    const t = useFormattedMessage();
     const { isNavigating, navigate } = useNavigate();
-    const hasBillToAddress = useMemo(() => {
-        return Boolean(cart?.billTo?.address1);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [Boolean(cart)]);
-    const fulfillmentMethodOptions = fulfillmentMethods?.reduce((acc, method) => ({
-        ...acc,
-        [method]: t(`fulfillmentMethod.${method}`),
-    }), {});
     const isPickup = cart?.fulfillmentMethod === 'PickUp';
     useEffect(() => {
         /* Initial guards. When these are not met, we should not proceed */
@@ -72,13 +39,13 @@ function ShippingPage() {
         if (isAuthenticated === undefined)
             return;
         if (!isAuthenticated)
-            return navigate('/signin?returnUrl=/CheckoutShipping');
+            return navigate(CHECKOUT_PATHS.CHECKOUT_SHIPPING_VIA_SIGNIN);
         if (hasNo(cart))
             return;
         if (hasNo(cart.cartLines) || cart.cartLines.length === 0)
-            return navigate('/cart');
+            return navigate(CHECKOUT_PATHS.CART);
         if (hasNo(cart.billTo))
-            return navigate('/signin?returnUrl=/CheckoutShipping');
+            return navigate(CHECKOUT_PATHS.CHECKOUT_SHIPPING_VIA_SIGNIN);
     }, [cart, navigate, isAuthenticated, isNavigating]);
     useEffect(() => {
         /* Guards for when the bill to address is saved and we should navigate to the next page */
@@ -92,10 +59,19 @@ function ShippingPage() {
             return location?.reload();
         if (hasNo(cart?.billTo?.address1))
             return;
-        return navigate(REVIEW_AND_SUBMIT_PATH);
+        return navigate(CHECKOUT_PATHS.REVIEW_AND_SUBMIT);
     }, [isSuccess, cart, navigate, isNavigating, isPatching, isError]);
-    if (error)
-        return jsx(ErrorPage, { error: error });
+    useEffect(() => {
+        if (!cart || gaEventPushed.current)
+            return;
+        dataLayer.push(createEcommerceEvent({
+            cart,
+            event: { event: 'begin_checkout' },
+        }));
+        gaEventPushed.current = true;
+    }, [cart, createEcommerceEvent, dataLayer]);
+    if (errorFetchCart)
+        return jsx(ErrorPage, { error: errorFetchCart });
     if (isLoading || isNavigating || isError || isSuccess)
         return jsx(LoadingPage, {});
     if (!isAuthenticated ||
@@ -105,34 +81,35 @@ function ShippingPage() {
         hasNo(cart.billTo) ||
         (hasNo(cart.billTo.address1) && hasNo(countries)))
         return null;
-    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 || 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: async (value) => {
-                                        await patchSession({
-                                            session: {
-                                                ...session,
-                                                fulfillmentMethod: value,
-                                            },
-                                        });
-                                        await refetchCart();
-                                    }, options: fulfillmentMethodOptions || {}, variant: "solid" }) }) }) })), hasBillToAddress ? (jsx(ReadOnlyAddresses, { billTo: cart.billTo, isLoading: isPatching, isPickup: isPickup, notes: cart.notes, onSubmit: async ({ notes }) => {
-                            if (!cart.billTo)
-                                return;
-                            await patchCartAndBillingAddress({ cart, notes });
-                        }, shipTo: cart.shipTo })) : (jsx(EditAddresses, { countries: countries || [], isLoading: isPatching, isPickup: isPickup, onSubmit: async ({ address, notes }) => {
-                            if (!cart.billTo)
-                                return;
-                            await patchCartAndBillingAddress({
-                                billTo: { ...cart.billTo, ...address },
-                                cart,
-                                notes,
-                            });
-                        } }))] }) }) }));
+    return (jsx(ShippingPageContent, { cart: cart, editAddress: jsx(EditAddresses, { countries: countries || [], isLoading: isPatching, isPickup: isPickup, onSubmit: async ({ address, notes }) => {
+                if (!cart.billTo)
+                    return;
+                await patchShippingDetails({
+                    billTo: { ...cart.billTo, ...address },
+                    cart,
+                    notes,
+                });
+                dataLayer.push(createEcommerceEvent({
+                    cart,
+                    event: { event: 'add_shipping_info' },
+                }));
+            } }), errorPatchBillingAddress: errorPatchBillingAddress, fulfillmentMethods: fulfillmentMethods, isLoadingFulfillmentMethods: isLoadingFulfillmentMethods, isPatching: isPatching, isPatchingSession: isPatchingSession, onChangeFulfillmentMethod: async (value) => {
+            await patchSession({
+                session: {
+                    ...session,
+                    fulfillmentMethod: value,
+                },
+            });
+            await refetchCart();
+        }, readOnlyAddress: jsx(ReadOnlyAddresses, { billTo: cart.billTo, isLoading: isPatching, isPickup: isPickup, notes: cart.notes, onSubmit: async ({ notes }) => {
+                if (!cart.billTo)
+                    return;
+                await patchShippingDetails({ cart, notes });
+                dataLayer.push(createEcommerceEvent({
+                    cart,
+                    event: { event: 'add_shipping_info' },
+                }));
+            }, shipTo: cart.shipTo }) }));
 }
 
 export { ShippingPage };

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

@@ -1,3 +1,3 @@
-var styles = {"fulfillment-select-wrapper":"shipping-page-module-v6oci"};
+var styles = {"fulfillment-select-wrapper":"shipping-page-module-v6oci","error-message":"shipping-page-module-FK0yX"};
 
 export { styles as default };

package/dist/pages/components/page/page.d.ts

@@ -1,9 +1,10 @@
 import { ReactNode } from 'react';
 import { BreadcrumbLink } from '../../../breadcrumbs/breadcrumb';
-export interface PageProps {
+import { PageMetaDataProps } from '../page-meta-data/page-meta-data';
+export interface PageProps extends PageMetaDataProps {
     breadCrumb: BreadcrumbLink[];
     children: ReactNode;
     className?: string;
     title?: string;
 }
-export declare function Page({ breadCrumb, children, className, title }: PageProps): import("react/jsx-runtime").JSX.Element;
+export declare function Page({ alternateLanguageUrls, breadCrumb, canonicalUrl, children, className, meta, openGraph, title, windowTitle, }: PageProps): import("react/jsx-runtime").JSX.Element;

package/dist/pages/components/page/page.js

@@ -4,13 +4,14 @@ import clsx from 'clsx';
 import { Breadcrumb } from '../../../breadcrumbs/breadcrumb.js';
 import { Heading } from '../../../typography/heading/heading.js';
 import { PageContainer } from '../page-container/page-container.js';
+import { PageMetaData } from '../page-meta-data/page-meta-data.js';
 import styles from './page.module.css.js';
 
 function PageTitle({ children }) {
     return (jsx(Heading, { italic: true, uppercase: true, breakpoints: { lg: 'm', xxl: 'xl' }, className: styles.title, size: "s", tag: "h1", children: children }));
 }
-function Page({ breadCrumb, children, className, title }) {
-    return (jsxs(PageContainer, { className: clsx(styles.page, className), children: [jsx("div", { className: styles.breadcrumb, children: jsx(Breadcrumb, { links: breadCrumb }) }), title && jsx(PageTitle, { children: title }), children] }));
+function Page({ alternateLanguageUrls, breadCrumb, canonicalUrl, children, className, meta, openGraph, title, windowTitle, }) {
+    return (jsxs(PageContainer, { className: clsx(styles.page, className), children: [jsx(PageMetaData, { alternateLanguageUrls: alternateLanguageUrls, canonicalUrl: canonicalUrl, meta: meta, openGraph: openGraph, windowTitle: windowTitle }), jsx("div", { className: styles.breadcrumb, children: jsx(Breadcrumb, { links: breadCrumb }) }), title && jsx(PageTitle, { children: title }), children] }));
 }
 
 export { Page };

package/dist/pages/components/page-meta-data/page-meta-data.d.ts

@@ -1,6 +1,6 @@
-interface PageMetaDataProps {
+export interface PageMetaDataProps {
     alternateLanguageUrls?: Record<string, string> | null;
-    canonicalUrl: string;
+    canonicalUrl?: string;
     meta?: {
         description: string;
         keywords: string;
@@ -10,7 +10,6 @@ interface PageMetaDataProps {
         title: string;
         url: string;
     };
-    title: string;
+    windowTitle?: string;
 }
 export declare function PageMetaData(props: PageMetaDataProps): null;
-export {};

package/dist/pages/components/page-meta-data/page-meta-data.js

@@ -21,8 +21,8 @@ function removeElements(selector) {
 function PageMetaData(props) {
     if (typeof document === 'undefined')
         return null;
-    if (props.title) {
-        document.title = props.title;
+    if (props.windowTitle) {
+        document.title = props.windowTitle;
     }
     if (props.canonicalUrl) {
         addOrUpdateElement('link[rel="canonical"]', {

package/dist/pages/product/product-details-page/components/product-details-panel/product-details-panel.js

@@ -10,10 +10,20 @@ import { FormattedMessage } from '../../../../../intl/formatted-message.js';
 import { DownloadDocumentList } from '../../../../../lists/download-document-list/download-document-list.js';
 import { FeatureList } from '../../../../../lists/feature-list/feature-list.js';
 import { Heading } from '../../../../../typography/heading/heading.js';
+import { useAlgoliaInsights } from '../../../../../algolia/use-algolia-insights.js';
 import styles from './product-details-panel.module.css.js';
 
 function ProductDetailsPanel({ priceComponent, product, }) {
-    return (jsxs("div", { className: styles['product-details-panel'], children: [jsxs("div", { className: styles.heading, children: [jsx(Heading, { italic: true, size: "xs", children: product.productTitle }), jsx(ProductSku, { sku: product.productNumber })] }), jsxs("div", { className: styles['price-action-container'], children: [priceComponent || (jsx(ProductPrice, { "data-test": "productPrice_unitNetPrice", isVatIncluded: product.isVatIncluded, originalPrice: product.originalPrice, price: product.price })), jsxs("div", { className: styles['action-container'], children: [product.canAddToCart && (jsx(ConnectedAddToCartButton, { productId: product.storefrontId })), product.canAddToWishlist && (jsx(ConnectedFavoriteButton, { productId: product.storefrontId }))] })] }), jsxs("div", { children: [jsx(Heading, { italic: true, className: styles['product-features-heading'], size: "xxs", children: jsx(FormattedMessage, { id: "Product Features" }) }), product.content.htmlContent && (jsx(ShowAll, { initialHeight: 216, children: jsx("div", { className: styles.description, dangerouslySetInnerHTML: {
+    const { sendAddToCartFromProductDetailsPageEvent, sendAddToWishListFromProductDetailsPageEvent, } = useAlgoliaInsights();
+    return (jsxs("div", { className: styles['product-details-panel'], children: [jsxs("div", { className: styles.heading, children: [jsx(Heading, { italic: true, size: "xs", children: product.productTitle }), jsx(ProductSku, { sku: product.productNumber })] }), jsxs("div", { className: styles['price-action-container'], children: [priceComponent || (jsx(ProductPrice, { "data-test": "productPrice_unitNetPrice", isVatIncluded: product.isVatIncluded, originalPrice: product.originalPrice, price: product.price })), jsxs("div", { className: styles['action-container'], children: [product.canAddToCart && (jsx(ConnectedAddToCartButton, { onAddToCart: ({ cartLine }) => {
+                                    sendAddToCartFromProductDetailsPageEvent({
+                                        cartLine,
+                                    });
+                                }, productId: product.storefrontId })), product.canAddToWishlist && (jsx(ConnectedFavoriteButton, { onFavoriting: () => {
+                                    sendAddToWishListFromProductDetailsPageEvent({
+                                        objectId: product.productNumber,
+                                    });
+                                }, productId: product.storefrontId }))] })] }), jsxs("div", { children: [jsx(Heading, { italic: true, className: styles['product-features-heading'], size: "xxs", children: jsx(FormattedMessage, { id: "Product Features" }) }), product.content.htmlContent && (jsx(ShowAll, { initialHeight: 216, children: jsx("div", { className: styles.description, dangerouslySetInnerHTML: {
                                 __html: product.content.htmlContent,
                             } }) }))] }), jsx("div", { children: jsxs(Accordion, { indented: true, borderType: ['top', 'middle-accentuated'], children: [product.attributeTypes.length > 0 && (jsx(AccordionItem, { id: "specification", title: jsx(FormattedMessage, { id: "Specifications" }), children: jsx(FeatureList, { className: styles['feature-list'], features: product.attributeTypes.map(attribute => ({
                                     id: `${attribute.id}`,

package/dist/pages/product/product-details-page/product-details-page.js

@@ -1,8 +1,7 @@
 "use client";
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { useCultureCode } from '../../../intl/use-culture-code.js';
 import { useFetchProductDetailsPageData } from '../../../shared/api/bff/hooks/use-fetch-product-details-page-data.js';
-import { PageMetaData } from '../../components/page-meta-data/page-meta-data.js';
 import { ErrorPage } from '../../error-page/error-page.js';
 import { LoadingPage } from '../../loading-page/loading-page.js';
 import { ProductDetails } from './product-details.js';
@@ -17,14 +16,7 @@ function ProductDetailsPage({ pageUrl }) {
         return jsx(ErrorPage, { error: error });
     if (!data || isFetching)
         return jsx(LoadingPage, {});
-    return (jsxs(Fragment, { children: [data.page && (jsx(PageMetaData, { alternateLanguageUrls: data.page.alternateLanguageUrls, canonicalUrl: data.page.canonicalPath, meta: {
-                    description: data.page.metaDescription,
-                    keywords: data.page.metaKeywords,
-                }, openGraph: {
-                    image: data.page.openGraphImage,
-                    title: data.page.openGraphTitle,
-                    url: data.page.openGraphUrl,
-                }, title: data.page.title })), jsx(ProductDetails, { data: data })] }));
+    return jsx(ProductDetails, { data: data });
 }
 
 export { ProductDetailsPage };

package/dist/pages/product/product-details-page/product-details.js

@@ -13,20 +13,26 @@ import { ProductDetailsPanel } from './components/product-details-panel/product-
 import { ProductDetailsRecentlyViewed } from './components/product-details-recently-viewed/product-details-recently-viewed.js';
 
 function ProductDetails({ data, priceComponent, recentlyViewedComponent, }) {
-    const { breadCrumb, included, product, recentlyViewed, usps } = data;
+    const { breadCrumb, included, page, product, recentlyViewed, usps } = data;
     useDataLayer({
         event: {
             event: 'view_item',
         },
         product,
     });
-    return (jsx(Page, { breadCrumb: breadCrumb, children: jsx(ProductDetailsPageLayout, { imageGallery: jsx(ProductDetailImages, { images: product.images }), included: included !== undefined &&
-                included.length > 0 && (jsxs(Fragment, { children: [jsx(Heading, { size: "s", tag: "h2", children: jsx(FormattedMessage, { id: "Includes" }) }), jsx(CardCarousel, { allowExpandToGrid: true, hasOverflow: true, cards: included.map(product => (jsx(ConnectedProductCard, { href: product.href, id: product.productId, image: {
+    return (jsx(Page, { alternateLanguageUrls: page.alternateLanguageUrls, breadCrumb: breadCrumb, canonicalUrl: page.canonicalPath, meta: {
+            description: page.metaDescription,
+            keywords: page.metaKeywords,
+        }, openGraph: {
+            image: page.openGraphImage,
+            title: page.openGraphTitle,
+            url: page.openGraphUrl,
+        }, windowTitle: page.title, children: jsx(ProductDetailsPageLayout, { imageGallery: jsx(ProductDetailImages, { images: product.images }), included: included.length > 0 && (jsxs(Fragment, { children: [jsx(Heading, { size: "s", tag: "h2", children: jsx(FormattedMessage, { id: "Includes" }) }), jsx(CardCarousel, { allowExpandToGrid: true, hasOverflow: true, cards: included.map(product => (jsx(ConnectedProductCard, { href: product.href, id: product.productId, image: {
                                 fit: 'contain',
                                 image: product.image,
                                 title: product.image?.altText || product.title,
                             }, price: product.price, sku: product.sku, tags: product.tags, title: product.title }, product.storefrontId))) })] })), productInformation: jsx(ProductDetailsPanel, { priceComponent: priceComponent, product: product }), recentlyViewed: recentlyViewedComponent ||
-                (recentlyViewed !== undefined && recentlyViewed.length > 0 && (jsx(ProductDetailsRecentlyViewed, { recentlyViewed: recentlyViewed }))), usp: usps && jsx(ProductUSPCarousel, { usps: usps }) }) }));
+                (recentlyViewed.length > 0 && (jsx(ProductDetailsRecentlyViewed, { recentlyViewed: recentlyViewed }))), usp: usps && jsx(ProductUSPCarousel, { usps: usps }) }) }));
 }
 
 export { ProductDetails };

package/dist/pages/product/product-listing-page/product-listing-page-data-types.d.ts

@@ -18,7 +18,7 @@ export interface ProductListingPageData {
     category: CategoryType | undefined;
     categoryPages: string;
     hierarchicalCategories: string[];
-    page?: PageModel;
+    page: PageModel;
     promoBanners?: {
         top: PromoBannerType[] | undefined;
     };

package/dist/pages/product/product-listing-page/product-listing-page.js

@@ -1,10 +1,9 @@
 "use client";
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { createSonicSearchClient } from '../../../algolia/algolia-sonic-searchclient.js';
 import { config } from '../../../config.js';
 import { useCultureCode } from '../../../intl/use-culture-code.js';
 import { useFetchProductListingPageData } from '../../../shared/api/bff/hooks/use-fetch-product-listing-page-data.js';
-import { PageMetaData } from '../../components/page-meta-data/page-meta-data.js';
 import { ErrorPage } from '../../error-page/error-page.js';
 import { LoadingPage } from '../../loading-page/loading-page.js';
 import { ProductListing } from './product-listing.js';
@@ -24,14 +23,7 @@ function ProductListingPage({ pageUrl, searchClient = defaultSearchClient, }) {
         return jsx(ErrorPage, { error: error });
     if (!data || isFetching)
         return jsx(LoadingPage, {});
-    return (jsxs(Fragment, { children: [data.page && (jsx(PageMetaData, { alternateLanguageUrls: data.page.alternateLanguageUrls, canonicalUrl: data.page.canonicalPath, meta: {
-                    description: data.page.metaDescription,
-                    keywords: data.page.metaKeywords,
-                }, openGraph: {
-                    image: data.page.openGraphImage,
-                    title: data.page.openGraphTitle,
-                    url: data.page.openGraphUrl,
-                }, title: data.page.title })), jsx(ProductListing, { data: data, searchClient: searchClient })] }));
+    return jsx(ProductListing, { data: data, searchClient: searchClient });
 }
 
 export { ProductListingPage };

package/dist/pages/product/product-listing-page/product-listing-product-overview/product-listing-product-overview.js

@@ -15,7 +15,6 @@ function ProductHitCard({ hit }) {
             title: hit.name,
         }, onAddToCart: ({ cartLine }) => sendAddToCartFromProductListPageEvent({
             cartLine,
-            objectId: hit.objectId,
         }), onClick: () => sendProductClickFromProductListPageEvent({
             objectId: hit.objectId,
             position: hit.position,

package/dist/pages/product/product-listing-page/product-listing.js

@@ -24,7 +24,14 @@ import styles from './product-listing-page.module.css.js';
 function ProductListing({ data, searchClient, }) {
     const languageCode = useLanguageCode();
     const category = data.breadCrumb.slice(1).map(breadCrumb => breadCrumb.label);
-    return (jsx(AlgoliaProvider, { categoryPages: data.categoryPages, hierarchicalCategories: data.hierarchicalCategories, languageCode: languageCode, offlineSearchClient: offlineSearchClient, searchClient: searchClient, children: jsx(Page, { breadCrumb: data.breadCrumb, className: styles['product-listing'], title: [...category].pop(), children: jsx(ProductListingPageContent, { currentCategoryPath: data.hierarchicalCategories, promoBanners: data.promoBanners?.top }) }) }, data.categoryPages));
+    return (jsx(AlgoliaProvider, { categoryPages: data.categoryPages, hierarchicalCategories: data.hierarchicalCategories, languageCode: languageCode, offlineSearchClient: offlineSearchClient, searchClient: searchClient, children: jsx(Page, { alternateLanguageUrls: data.page.alternateLanguageUrls, breadCrumb: data.breadCrumb, canonicalUrl: data.page.canonicalPath, className: styles['product-listing'], meta: {
+                description: data.page.metaDescription,
+                keywords: data.page.metaKeywords,
+            }, openGraph: {
+                image: data.page.openGraphImage,
+                title: data.page.openGraphTitle,
+                url: data.page.openGraphUrl,
+            }, title: [...category].pop(), windowTitle: data.page.title, children: jsx(ProductListingPageContent, { currentCategoryPath: data.hierarchicalCategories, promoBanners: data.promoBanners?.top }) }) }, data.categoryPages));
 }
 function ProductListingPageContent({ currentCategoryPath, promoBanners, }) {
     const { hits, isLoading } = useAlgoliaHits();

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

@@ -15,7 +15,6 @@ function ProductHitCard({ hit }) {
             title: hit.name,
         }, onAddToCart: ({ cartLine }) => sendAddToCartFromSearchResultPageEvent({
             cartLine,
-            objectId: hit.objectId,
         }), onClick: () => {
             sendProductClickFromSearchResultPageEvent({
                 objectId: hit.objectId,

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

@@ -14,7 +14,6 @@ import { scrollToTop } from '../../../shared/hooks/use-scroll-to.js';
 import { Sidebar } from '../../../sidebar/sidebar.js';
 import { ToggleSidebarButton } from '../../../sidebar/toggle-sidebar-button.js';
 import { Page } from '../../components/page/page.js';
-import { PageMetaData } from '../../components/page-meta-data/page-meta-data.js';
 import { LoadingPage } from '../../loading-page/loading-page.js';
 import { NoResults } from '../product-listing-page/no-results/no-results.js';
 import { SearchResultProductOverview } from './search-result-product-overview/search-result-product-overview.js';
@@ -28,13 +27,11 @@ function SearchResultsPage({ location, searchClient, }) {
     const keyword = Array.isArray(keywords) ? keywords.join(' ') : keywords;
     if (!keyword)
         return jsx("h1", { children: "No search results...." });
-    return (jsxs(AlgoliaProvider, { languageCode: languageCode, query: keyword, searchClient: searchClient, children: [jsx(PageMetaData
+    return (jsx(AlgoliaProvider, { languageCode: languageCode, query: keyword, searchClient: searchClient, children: jsx(Page, { breadCrumb: [], 
             // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
-            , { 
-                // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
-                canonicalUrl: typeof window === 'undefined' ? '' : window.location.href, title: t('Search') }), jsx(Page, { breadCrumb: [], className: styles['search-results'], title: t("'{0}' in all products", {
-                    replacementValues: { 0: keyword },
-                }), children: jsx(SearchResultsPageContent, { keyword: keyword }) })] }));
+            canonicalUrl: typeof window === 'undefined' ? '' : window.location.href, className: styles['search-results'], title: t("'{0}' in all products", {
+                replacementValues: { 0: keyword },
+            }), windowTitle: `${t('Search')} - ${t('Sonic Equipment')}`, children: jsx(SearchResultsPageContent, { keyword: keyword }) }) }));
 }
 function SearchResultsPageContent({ keyword }) {
     const { hits, isLoading } = useAlgoliaHits();