@sonic-equipment/ui 133.0.0 → 134.0.0

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/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,

package/dist/shared/fetch/request.d.ts

@@ -49,10 +49,10 @@ export declare class InternalServerErrorRequestError extends RequestError {
     constructor(responseOrError: Response | unknown, options?: RequestErrorOptions);
 }
 export type RequestHeaders = Record<string, string | null | undefined>;
-type RequestHeadersWithBody = RequestHeaders & {
+export type RequestHeadersWithBody = RequestHeaders & {
     'Content-Type': string;
 };
-interface BaseRequestOptions {
+export interface BaseRequestOptions {
     cache?: RequestCache;
     credentials?: RequestCredentials;
     headers?: RequestHeaders;
@@ -65,38 +65,43 @@ interface BaseRequestOptions {
     timeout?: number;
     url: string;
 }
-interface RequestOptionsWithFormData extends BaseRequestOptions {
+export interface RequestOptionsWithFormData extends BaseRequestOptions {
     body: FormData;
     headers: RequestHeaders;
 }
-interface RequestOptionsWithBody extends BaseRequestOptions {
+export interface RequestOptionsWithBody extends BaseRequestOptions {
     body: unknown;
     headers: RequestHeadersWithBody;
 }
-interface RequestOptionsWithoutBody extends BaseRequestOptions {
+export interface RequestOptionsWithoutBody extends BaseRequestOptions {
     body?: never;
     headers?: RequestHeaders;
 }
-type RequestOptions = RequestOptionsWithBody | RequestOptionsWithoutBody | RequestOptionsWithFormData;
-type AfterRequestHandler<T> = (args: {
+export type RequestOptions = RequestOptionsWithBody | RequestOptionsWithoutBody | RequestOptionsWithFormData;
+type BeforeRequestHandler = (options?: RequestOptions) => RequestOptions | void;
+type BeforeRequestHandlerAsync = (options?: RequestOptions) => Promise<RequestOptions | void>;
+export interface AfterRequestHandlerArgs<T> {
     body: T | undefined;
     error?: RequestError;
     options: RequestOptions;
     response?: Response;
-}) => void;
-type BeforeRequestHandler = (options?: RequestOptions) => RequestOptions | void;
-type RequestReturnType<T> = Promise<{
+}
+export type AfterRequestHandler<T> = (args: AfterRequestHandlerArgs<T>) => void;
+export type AfterRequestHandlerAsync<T> = (args: AfterRequestHandlerArgs<T>) => Promise<void>;
+export declare const isJsonBody: (options: RequestOptions) => boolean;
+export declare const isFormData: (body: unknown) => body is FormData;
+export type RequestReturnType<T> = Promise<{
     body: T;
     headers: Headers;
     status: number;
     statusText: string;
 }>;
-interface Request {
+export interface Request {
     <T>(options: RequestOptions): RequestReturnType<T>;
-    _afterHandlers: AfterRequestHandler<any>[];
-    _beforeHandlers: BeforeRequestHandler[];
     after<T = any>(handler: AfterRequestHandler<T>): void;
+    after<T = any>(handler: AfterRequestHandlerAsync<T>): void;
     before(handler: BeforeRequestHandler): void;
+    before(handler: BeforeRequestHandlerAsync): void;
     headers: Omit<RequestHeaders, 'Content-Type'>;
 }
 export declare const request: Request;

package/dist/shared/fetch/request.js

@@ -1,4 +1,5 @@
 import qs from 'query-string';
+import { isPromise } from '../utils/promise.js';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const isResponse = (response) => Boolean(response?.json);
@@ -181,17 +182,20 @@ const createBody = (options) => {
     throw new Error(`request: Unknown body type for request ${url}. Unable to send request.`);
 };
 const createHeaders = (...headers) => {
-    const allHeaders = {};
+    const allHeaders = new Headers();
     for (const header of headers) {
         if (!header)
             continue;
         for (const key of Object.keys(header)) {
             if (header[key])
-                allHeaders[key] = header[key];
+                allHeaders.append(key, String(header[key]));
         }
     }
     return allHeaders;
 };
+const beforeHandlers = [];
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const afterHandlers = [];
 /* Because of a bug in the rollup dts package the following code must be put inside of a IIFE.
  * The bug occurs when assigning properties to the request function at the top level of this file.
  * request.headers = {}
@@ -204,7 +208,12 @@ const request = (function createRequestFunction() {
         let error;
         let isTimeout = false;
         try {
-            options = request._beforeHandlers.reduce((options, handler) => handler(options) || options, options);
+            for await (const handler of beforeHandlers) {
+                const promiseOrOptions = handler(options);
+                options = isPromise(promiseOrOptions)
+                    ? (await promiseOrOptions) || options
+                    : promiseOrOptions || options;
+            }
             options.timeout = options.timeout || 1000 * 60 * 2;
             const url = qs.stringifyUrl({ query: options.params, url: options.url });
             const controller = new AbortController();
@@ -245,19 +254,23 @@ const request = (function createRequestFunction() {
             throw error;
         }
         finally {
-            request._afterHandlers.forEach(handler => handler({ body, error, options, response }));
+            for await (const handler of afterHandlers) {
+                const promiseOrVoid = handler({ body, error, options, response });
+                if (isPromise(promiseOrVoid))
+                    await promiseOrVoid;
+            }
         }
     };
     request.headers = {};
-    request._afterHandlers = [];
-    request._beforeHandlers = [];
     request.after = (handler) => {
-        request._afterHandlers.push(handler);
+        afterHandlers.push(
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        handler);
     };
     request.before = (handler) => {
-        request._beforeHandlers.push(handler);
+        beforeHandlers.push(handler);
     };
     return request;
 })();
 
-export { BadRequestError, ForbiddenRequestError, InternalServerErrorRequestError, NotFoundRequestError, RequestError, TimeoutRequestError, UnauthorizedRequestError, UnprocessableContentRequestError, isRequestError, request };
+export { BadRequestError, ForbiddenRequestError, InternalServerErrorRequestError, NotFoundRequestError, RequestError, TimeoutRequestError, UnauthorizedRequestError, UnprocessableContentRequestError, isFormData, isJsonBody, isRequestError, request };

package/dist/shared/ga/use-data-layer.d.ts

@@ -8,9 +8,13 @@ interface GAProductModel {
     unitListPriceDisplay: string;
 }
 interface GACartModel {
-    cartLines: CartModel['cartLines'];
+    cartLines?: CartModel['cartLines'];
     currencySymbol: string;
+    orderGrandTotal: number;
     orderSubTotal: number;
+    shippingAndHandling: number;
+    totalTax: number;
+    trackId: string;
 }
 interface GACartLineModel {
     erpNumber: string;
@@ -26,12 +30,12 @@ interface CreateEcommerceEventArgsWithCartLine {
     event: GAEcommerceEvent;
 }
 interface CreateEcommerceEventArgsWithCart {
+    cart: GACartModel;
     event: GAEcommerceEvent;
-    product: GAProductModel;
 }
 interface CreateEcommerceEventArgsWithProduct {
-    cart: GACartModel;
     event: GAEcommerceEvent;
+    product: GAProductModel;
 }
 interface CreateEcommerceEvent {
     (args: CreateEcommerceEventArgsWithCart): GAEcommerceEvent;

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

@@ -12,7 +12,8 @@ function useDataLayer(eventOrArgs) {
                 ...event,
                 ecommerce: {
                     ...event.ecommerce,
-                    currency: event.ecommerce?.currency ?? cart.currencySymbol,
+                    currency: event.ecommerce?.currency ??
+                        currencySymbolToISO[cart.currencySymbol],
                     customer: event.ecommerce?.customer ?? customerNumber,
                     items: cart.cartLines?.map(cartLine => ({
                         item_id: cartLine.erpNumber,
@@ -20,6 +21,10 @@ function useDataLayer(eventOrArgs) {
                         price: cartLine.pricing?.unitNetPrice,
                         quantity: cartLine.qtyOrdered ?? 0,
                     })) ?? [],
+                    shipping: cart.shippingAndHandling,
+                    tax: cart.totalTax,
+                    transaction_id: cart.trackId,
+                    value: cart.orderGrandTotal,
                 },
                 value: event.value ?? cart.orderSubTotal ?? 0,
             };

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

@@ -0,0 +1,2 @@
+export declare function wait(ms: number): Promise<unknown>;
+export declare function isPromise<T>(value: any): value is Promise<T>;

package/dist/shared/utils/promise.js

@@ -0,0 +1,9 @@
+function wait(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function isPromise(value) {
+    return value && typeof value.then === 'function';
+}
+
+export { isPromise, wait };

package/dist/sign-in-form/sign-in-form.d.ts

@@ -0,0 +1,19 @@
+interface LoginData {
+    email: string;
+    guestSignin: false;
+    password: string;
+    remember?: boolean;
+}
+interface GuestLoginData {
+    guestSignin: true;
+}
+export interface SignInFormProps {
+    allowGuestSignIn?: boolean;
+    initialEmail?: string;
+    initialRemember?: boolean;
+    onSubmit?: ({ data }: {
+        data: LoginData | GuestLoginData;
+    }) => void;
+}
+export declare function SignInForm({ allowGuestSignIn, initialEmail, initialRemember, onSubmit, }: SignInFormProps): import("react/jsx-runtime").JSX.Element;
+export {};