@sonic-equipment/ui 133.0.0 → 135.0.0

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

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef, useState, useMemo, useEffect, useCallback } from 'react';
 import { Form } from 'react-aria-components';
+import { useAlgoliaInsights } from '../../../../algolia/use-algolia-insights.js';
 import { Accordion } from '../../../../collapsables/accordion/accordion.js';
 import { AccordionItem } from '../../../../collapsables/accordion/accordion-item.js';
 import { config } from '../../../../config.js';
@@ -8,6 +9,7 @@ import { InfoDisplay } from '../../../../display/info-display/info-display.js';
 import { Checkbox } from '../../../../forms/checkbox/checkbox.js';
 import { Select } from '../../../../forms/select/select.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 { usePatchSession } from '../../../../shared/api/storefront/hooks/authentication/use-patch-session.js';
@@ -15,18 +17,20 @@ import { usePatchCart } from '../../../../shared/api/storefront/hooks/cart/use-p
 import { usePlaceOrder } from '../../../../shared/api/storefront/hooks/cart/use-place-order.js';
 import { useInvalidateAdyen } from '../../../../shared/api/storefront/hooks/payment/use-invalidate-adyen.js';
 import { validateVATNumber } from '../../../../shared/api/storefront/services/finance-service.js';
+import { useDataLayer } from '../../../../shared/ga/use-data-layer.js';
 import { useDebouncedCallback } from '../../../../shared/hooks/use-debounced-callback.js';
 import { currencySymbolToISO } from '../../../../shared/model/currency.js';
-import { Tooltip } from '../../../../tooltip/tooltip.js';
 import { BillingAndInvoiceInformation } from '../../components/billing-and-invoice-information.js';
 import { useHasReturnedFromAdyen } from '../hooks/use-has-returned-from-adyen.js';
 import { AdyenPayment } from './adyen-payment.js';
 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: isPatchingSession } = usePatchSession();
     const { isLoading: isPlacingCart, mutate: placeOrder } = usePlaceOrder();
+    const { sendPurchaseEventFromPaymentPage } = useAlgoliaInsights();
     const dropinRef = useRef(null);
     const [paymentError, setPaymentError] = useState();
     const [apiError, setAPIError] = useState();
@@ -104,6 +108,40 @@ function Payment({ atp, cart: _cart, form, onError: _onError, onPaymentComplete,
             setIsValidatingVAT(false);
         }
     }, 500);
+    const onPlaceOrderCompleted = useCallback(({ cart, payment_type }) => {
+        dataLayer.push(createEcommerceEvent({
+            cart,
+            event: {
+                ecommerce: {
+                    payment_type,
+                },
+                event: 'add_payment_info',
+            },
+        }), createEcommerceEvent({
+            cart,
+            event: {
+                ecommerce: {
+                    payment_type,
+                },
+                event: 'purchase',
+            },
+        }), {
+            currency: currencySymbolToISO[cart.currencySymbol],
+            event: 'transactionComplete',
+            transactionAffiliation: cart.billTo?.companyName,
+            transactionId: cart.orderNumber,
+            transactionProducts: cart.cartLines?.map(cartLine => ({
+                name: cartLine.shortDescription,
+                price: cartLine.pricing?.unitNetPrice,
+                quantity: cartLine.qtyOrdered,
+                sku: cartLine.erpNumber,
+            })) || [],
+            transactionShipping: cart.shippingAndHandling,
+            transactionTax: cart.totalTax,
+            transactionTotal: cart.orderGrandTotal,
+        });
+        sendPurchaseEventFromPaymentPage({ cart });
+    }, [createEcommerceEvent, dataLayer, sendPurchaseEventFromPaymentPage]);
     async function onSubmit(e) {
         const formData = new FormData(e.currentTarget);
         const cart = cartRef.current;
@@ -151,6 +189,10 @@ function Payment({ atp, cart: _cart, form, onError: _onError, onPaymentComplete,
             const cart = cartRef.current;
             try {
                 await placeOrder({ cart });
+                onPlaceOrderCompleted({
+                    cart,
+                    payment_type: cart.paymentMethod?.name || '',
+                });
                 return onPaymentComplete({ cartId: cart.trackId });
             }
             catch (error) {
@@ -175,14 +217,17 @@ function Payment({ atp, cart: _cart, form, onError: _onError, onPaymentComplete,
                     },
                 },
             });
+            onPlaceOrderCompleted({
+                cart,
+                payment_type: 'Adyen',
+            });
             return onPaymentComplete({ cartId: cart.trackId });
         }
         catch (error) {
             console.error(error);
-            // TODO: Errors from the placeOrder call are not displayed
             setAPIError(error);
         }
-    }, [onPaymentComplete, placeOrder]);
+    }, [onPaymentComplete, onPlaceOrderCompleted, placeOrder]);
     const onError = useCallback((error, result) => {
         invalidateAdyen();
         // invalidateCurrentCart()
@@ -197,7 +242,7 @@ function Payment({ atp, cart: _cart, form, onError: _onError, onPaymentComplete,
                                     setAsSoonAsPossible(checked);
                                     if (checked)
                                         setDeliveryDate('');
-                                }, children: jsx(FormattedMessage, { id: "As soon as possible" }) }), jsx(Tooltip, { text: t('Selecting As Soon As Possible will enable us to send the products to you as they become available.') })] })] })), jsx(Select, { isRequired: true, "data-test-selector": "industrySelect", defaultSelectedOption: cart.properties.industry, isDisabled: hasReturnedFromAdyen, label: t('Industry'), name: "industry", options: {
+                                }, children: jsx(FormattedMessage, { id: "As soon as possible" }) }), jsx(InfoIconTooltip, { variant: "stroke", children: t('Selecting As Soon As Possible will enable us to send the products to you as they become available.') })] })] })), jsx(Select, { isRequired: true, "data-test-selector": "industrySelect", defaultSelectedOption: cart.properties.industry, isDisabled: hasReturnedFromAdyen, label: t('Industry'), name: "industry", options: {
                     /* eslint-disable sort-keys-fix/sort-keys-fix */
                     PP: 'Private User',
                     AU: 'Automotive',

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

@@ -0,0 +1,15 @@
+import { CartModel, CheckoutAtpEntry } from '../../../shared/api/storefront/model/storefront.model';
+export interface PaymentContentProps {
+    atp: CheckoutAtpEntry[];
+    cart: CartModel;
+    formId: string;
+    hasAtp: boolean;
+    isProcessing: boolean;
+    isValidating: boolean;
+    onPaymentComplete: ({ cartId }: {
+        cartId: string;
+    }) => void;
+    setIsProcessing: (isProcessing: boolean) => void;
+    setIsValidating: (isValidating: boolean) => void;
+}
+export declare function PaymentPageContent({ atp, cart, formId, hasAtp, isProcessing, isValidating, onPaymentComplete, setIsProcessing, setIsValidating, }: PaymentContentProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,43 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Button } from '../../../buttons/button/button.js';
+import { OrderLineCard } from '../../../cards/orderline-card/orderline-card.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 { OrderLineList } from '../../../lists/orderline-list/orderline-list.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 { Payment } from './components/payment.js';
+
+function PaymentPageContent({ atp, cart, formId, hasAtp, isProcessing, isValidating, onPaymentComplete, setIsProcessing, setIsValidating, }) {
+    const t = useFormattedMessage();
+    return (jsx(Page, { breadCrumb: [
+            { href: CHECKOUT_PATHS.HOME, label: t('Home') },
+            {
+                href: CHECKOUT_PATHS.REVIEW_AND_SUBMIT,
+                label: t('Review and payment'),
+            },
+        ], title: t('Review and payment'), children: jsxs(CheckoutPageLayout, { actions: {
+                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',
+                                    image: {
+                                        '1': cartLine.smallImagePath,
+                                        '2': cartLine.smallImagePath,
+                                        '3': cartLine.smallImagePath,
+                                        altText: cartLine.altText,
+                                    },
+                                    title: cartLine.altText,
+                                }, isReadonly: true, price: {
+                                    originalTotalPrice: cartLine.pricing?.extendedUnitNetPrice || 0,
+                                    pricePerUnit: cartLine.pricing?.unitNetPrice || 0,
+                                    totalPrice: cartLine.pricing?.extendedUnitNetPrice || 0,
+                                }, productId: cartLine.productId || '', quantity: cartLine.qtyOrdered || 1, sku: cartLine.erpNumber || '', tags: [], title: cartLine.productName }, cartLine.id))) }) }) })] }) }));
+}
+
+export { PaymentPageContent };

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

@@ -1,26 +1,15 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { useState, useCallback, useEffect } from 'react';
-import { Button } from '../../../buttons/button/button.js';
-import { OrderLineCard } from '../../../cards/orderline-card/orderline-card.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 { OrderLineList } from '../../../lists/orderline-list/orderline-list.js';
 import { useIsAuthenticated } from '../../../shared/api/storefront/hooks/authentication/use-is-authenticated.js';
 import { useFetchCurrentCheckoutAtp } from '../../../shared/api/storefront/hooks/cart/use-fetch-current-cart-checkout-atp.js';
 import { useFetchCurrentCartWithAtp } from '../../../shared/api/storefront/hooks/cart/use-fetch-current-cart-with-atp.js';
 import { useNavigate } from '../../../shared/routing/route-provider.js';
 import { 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 { 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 { Payment } from './components/payment.js';
 import { useHasReturnedFromAdyen } from './hooks/use-has-returned-from-adyen.js';
+import { PaymentPageContent } from './payment-page-content.js';
 
 const PAYMENT_FORM_ID = 'paymentForm';
 function PaymentPage() {
@@ -32,7 +21,6 @@ function PaymentPage() {
     const { data: atp, isLoading: isAtpLoading } = useFetchCurrentCheckoutAtp();
     const hasAtp = atp && atp.length > 1;
     const isLoading = isLoadingCart || isAtpLoading;
-    const t = useFormattedMessage();
     const [isProcessing, setIsProcessing] = useState(false);
     const [isValidating, setIsValidating] = useState(false);
     const { isNavigating, navigate } = useNavigate();
@@ -66,29 +54,7 @@ function PaymentPage() {
         cart.cartLines.length === 0 ||
         hasNo(cart.billTo?.address1))
         return null;
-    return (jsx(Page, { breadCrumb: [
-            { href: CHECKOUT_PATHS.HOME, label: t('Home') },
-            {
-                href: CHECKOUT_PATHS.REVIEW_AND_SUBMIT,
-                label: t('Review and payment'),
-            },
-        ], title: t('Review and payment'), children: jsxs(CheckoutPageLayout, { actions: {
-                primary: (jsx(Button, { withArrow: true, "data-test-selector": "checkoutShippingCartTotalContinueButton", form: PAYMENT_FORM_ID, 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: PAYMENT_FORM_ID, 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',
-                                    image: {
-                                        '1': cartLine.smallImagePath,
-                                        '2': cartLine.smallImagePath,
-                                        '3': cartLine.smallImagePath,
-                                        altText: cartLine.altText,
-                                    },
-                                    title: cartLine.altText,
-                                }, isReadonly: true, price: {
-                                    originalTotalPrice: cartLine.pricing?.extendedUnitNetPrice || 0,
-                                    pricePerUnit: cartLine.pricing?.unitNetPrice || 0,
-                                    totalPrice: cartLine.pricing?.extendedUnitNetPrice || 0,
-                                }, productId: cartLine.productId || '', quantity: cartLine.qtyOrdered || 1, sku: cartLine.erpNumber || '', tags: [], title: cartLine.productName }, cartLine.id))) }) }) })] }) }));
+    return (jsx(PaymentPageContent, { atp: atp, cart: cart, formId: PAYMENT_FORM_ID, hasAtp: Boolean(hasAtp), isProcessing: isProcessing, isValidating: isValidating, onPaymentComplete: onPaymentComplete, setIsProcessing: setIsProcessing, setIsValidating: setIsValidating }));
 }
 
 export { PaymentPage };

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

@@ -4,11 +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';
@@ -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", 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) ||
@@ -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(Tooltip, { text: 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, { 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

@@ -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,33 +1,26 @@
-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 { 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 { 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 { 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, EditAddresses } from './components/edit-address.js';
+import { EditAddresses } from './components/edit-address.js';
 import { ReadOnlyAddresses } from './components/readonly-address.js';
 import { usePatchShippingDetails } from './hooks/use-patch-shipping-details.js';
-import styles from './shipping-page.module.css.js';
+import { ShippingPageContent } from './shipping-page-content.js';
 
 function ShippingPage() {
     const isAuthenticated = useIsAuthenticated();
+    const { createEcommerceEvent, dataLayer } = useDataLayer();
+    const gaEventPushed = useRef(false);
     const { data: cart, error: errorFetchCart, isLoading: isLoadingCart, refetch: refetchCart, } = useFetchCurrentCart();
     const { data: countries, isLoading: isLoadingCountries } = useFetchCountries({
         enabled: hasNo(cart?.billTo?.address1),
@@ -37,16 +30,7 @@ function ShippingPage() {
     const { isLoading: isPatchingSession, mutate: patchSession } = usePatchSession();
     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 */
@@ -77,6 +61,15 @@ function ShippingPage() {
             return;
         return navigate(CHECKOUT_PATHS.REVIEW_AND_SUBMIT);
     }, [isSuccess, cart, navigate, isNavigating, isPatching, isError]);
+    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)
@@ -88,37 +81,35 @@ function ShippingPage() {
         hasNo(cart.billTo) ||
         (hasNo(cart.billTo.address1) && hasNo(countries)))
         return null;
-    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: 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 patchShippingDetails({ cart, notes });
-                            }, shipTo: cart.shipTo })) : (jsx(EditAddresses, { countries: countries || [], isLoading: isPatching, isPickup: isPickup, onSubmit: async ({ address, notes }) => {
-                                if (!cart.billTo)
-                                    return;
-                                await patchShippingDetails({
-                                    billTo: { ...cart.billTo, ...address },
-                                    cart,
-                                    notes,
-                                });
-                            } }))] }), Boolean(errorPatchBillingAddress) && (jsx("div", { className: styles['error-message'], children: jsx(FormattedMessage, { id: "An unexpected error occured" }) }))] }) }));
+    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/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-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/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,