@sonic-equipment/ui 133.0.0 → 134.0.0

package/dist/forms/textarea/textarea.js

@@ -2,6 +2,7 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { forwardRef, useRef, useCallback, useEffect } from 'react';
 import { useContextProps, TextAreaContext, TextArea as TextArea$1 } from 'react-aria-components';
+import clsx from 'clsx';
 import styles from './textarea.module.css.js';
 
 /**
@@ -10,7 +11,7 @@ import styles from './textarea.module.css.js';
  * The initial height is calculated based on the style of the textarea.
  * The height is updated everytime the user types.
  */
-const TextArea = forwardRef(({ autoGrow, label, size, ...textAreaProps }, _ref) => {
+const TextArea = forwardRef(({ autoGrow, className, label, size, ...textAreaProps }, _ref) => {
     const textAreaRef = useRef(null);
     const [props, ref] = useContextProps(textAreaProps, textAreaRef, TextAreaContext);
     const initialHeight = useRef(null);
@@ -40,7 +41,7 @@ const TextArea = forwardRef(({ autoGrow, label, size, ...textAreaProps }, _ref)
         }
         updateHeight();
     }, [ref, autoGrow, updateHeight, size]);
-    return (jsx(Fragment, { children: jsx("div", { className: styles['input-container'], children: jsx(TextArea$1, { "aria-label": label, ...textAreaProps, ref: node => {
+    return (jsx(Fragment, { children: jsx("div", { className: clsx(className, styles['input-container']), children: jsx(TextArea$1, { "aria-label": label, ...textAreaProps, ref: node => {
                     ref.current =
                         node;
                     return (textAreaRef.current = node);

package/dist/global-search/plugins/categories-plugin.js

@@ -14,7 +14,8 @@ const categoriesPlugin = ({ productsIndexName, searchClient, }) => {
                                 {
                                     indexName: productsIndexName,
                                     params: {
-                                        hitsPerPage: 1,
+                                        analytics: false,
+                                        hitsPerPage: 0,
                                     },
                                     query,
                                 },

package/dist/global-search/plugins/popular-categories-plugin.js

@@ -11,6 +11,8 @@ const popularCategoriesPlugin = ({ productsIndexName, searchClient, }) => {
                                 {
                                     indexName: productsIndexName,
                                     params: {
+                                        analytics: false,
+                                        hitsPerPage: 0,
                                         ruleContexts: ['no-results'],
                                     },
                                 },

package/dist/global-search/plugins/query-suggestions-plugin.js

@@ -3,6 +3,7 @@ import { createQuerySuggestionsPlugin } from '@algolia/autocomplete-plugin-query
 const querySuggestionsPlugin = ({ searchClient, suggestionsIndexName, }) => createQuerySuggestionsPlugin({
     getSearchParams({ state }) {
         return {
+            analytics: false,
             hitsPerPage: state.query ? 10 : 0,
         };
     },

package/dist/global-search/plugins/quick-access-plugin.js

@@ -2,7 +2,7 @@ import { getAlgoliaResults } from '@algolia/autocomplete-preset-algolia';
 
 const quickAccessPlugin = ({ productsIndexName, searchClient, }) => {
     return {
-        getSources({ query }) {
+        getSources() {
             return [
                 {
                     getItems() {
@@ -11,10 +11,10 @@ const quickAccessPlugin = ({ productsIndexName, searchClient, }) => {
                                 {
                                     indexName: productsIndexName,
                                     params: {
+                                        analytics: false,
                                         hitsPerPage: 0,
                                         ruleContexts: ['quick-access'],
                                     },
-                                    query,
                                 },
                             ],
                             searchClient,

package/dist/global-search/search-result-panel/sections/with-results.js

@@ -66,7 +66,6 @@ function ProductHitCard({ autocomplete, hit, index, source, }) {
         }, onAddToCart: ({ cartLine }) => hit.queryId &&
             sendAddToCartFromSearchEvent({
                 cartLine,
-                objectId: hit.objectId,
                 queryId: hit.queryId,
             }), onClick: () => {
             close();

package/dist/index.js

@@ -12,10 +12,10 @@ export { AlgoliaFilterPanel } from './algolia/algolia-filter-panel.js';
 export { isAlgoliaProductHit } from './algolia/algolia-hit-type.js';
 export { AlgoliaHitsProvider } from './algolia/algolia-hits-provider.js';
 export { algoliaIndexesPerEnvironment, getAlgoliaIndex } from './algolia/algolia-index-config.js';
+export { userToken } from './algolia/algolia-initialization.js';
 export { AlgoliaInsightInstantSearchProvider } from './algolia/algolia-insight-instant-search-provider.js';
 export { AlgoliaInsightsProvider, AlgoliaInsightsProviderContext } from './algolia/algolia-insights-provider.js';
 export { AlgoliaInstantSearchStateProvider } from './algolia/algolia-instant-search-state-provider.js';
-export { userToken } from './algolia/algolia-intialization.js';
 export { AlgoliaMultiSelectFilterSection } from './algolia/algolia-multi-select-filter-section.js';
 export { AlgoliaPagination } from './algolia/algolia-pagination.js';
 export { AlgoliaProvider, useAlgolia } from './algolia/algolia-provider.js';
@@ -112,6 +112,7 @@ export { SearchList } from './global-search/search-section/search-list.js';
 export { SearchListItem } from './global-search/search-section/search-list-item.js';
 export { SearchSection } from './global-search/search-section/search-section.js';
 export { ConnectedCartIcon } from './header/cart-icon/connected-cart-icon.js';
+export { InfoIconTooltip } from './info-icon-tooltip/info-icon-tooltip.js';
 export { FormattedMessage } from './intl/formatted-message.js';
 export { IntlContext } from './intl/intl-context.js';
 export { IntlProvider } from './intl/intl-provider.js';
@@ -152,17 +153,20 @@ export { CheckoutPageSectionContent } from './pages/checkout/layouts/checkout-pa
 export { CheckoutPageSectionHeader } from './pages/checkout/layouts/checkout-page-layout/components/checkout-page-section-header.js';
 export { CheckoutPageSectionLink } from './pages/checkout/layouts/checkout-page-layout/components/checkout-page-section-link.js';
 export { OrderConfirmationPage } from './pages/checkout/order-confirmation-page/order-confirmation-page.js';
+export { OrderConfirmationPageContent } from './pages/checkout/order-confirmation-page/order-confirmation-page-content.js';
 export { AdyenPayment } from './pages/checkout/payment-page/components/adyen-payment.js';
 export { Payment } from './pages/checkout/payment-page/components/payment.js';
 export { useGetAdyenRedirectResult } from './pages/checkout/payment-page/hooks/use-get-adyen-redirect-result.js';
 export { useHasReturnedFromAdyen } from './pages/checkout/payment-page/hooks/use-has-returned-from-adyen.js';
 export { PaymentPage } from './pages/checkout/payment-page/payment-page.js';
+export { PaymentPageContent } from './pages/checkout/payment-page/payment-page-content.js';
 export { parseAmount } from './pages/checkout/payment-page/utils/parse-amount.js';
 export { EDIT_ADDRESS_FORM_ID, EditAddresses } from './pages/checkout/shipping-page/components/edit-address.js';
 export { ReadOnlyAddresses } from './pages/checkout/shipping-page/components/readonly-address.js';
 export { SonicAddress } from './pages/checkout/shipping-page/components/sonic-address.js';
 export { usePatchShippingDetails } from './pages/checkout/shipping-page/hooks/use-patch-shipping-details.js';
 export { ShippingPage } from './pages/checkout/shipping-page/shipping-page.js';
+export { ShippingPageContent } from './pages/checkout/shipping-page/shipping-page-content.js';
 export { PageContainer } from './pages/components/page-container/page-container.js';
 export { PageMetaData } from './pages/components/page-meta-data/page-meta-data.js';
 export { Page } from './pages/components/page/page.js';
@@ -245,7 +249,7 @@ export { fetchTranslations } from './shared/api/storefront/services/translation-
 export { fetchCountries, fetchCountriesLanguages, fetchCountriesWithLanguages, fetchSettings, updateLocale } from './shared/api/storefront/services/website-service.js';
 export { WishListNameAlreadyExistsError, addWishListItemToWishList, createWishList, deleteWishList, deleteWishListItemFromWishList, getWishList, getWishListItemsByWishListId, getWishLists } from './shared/api/storefront/services/wishlist-service.js';
 export { useFeatureFlags } from './shared/feature-flags/use-feature-flags.js';
-export { BadRequestError, ForbiddenRequestError, InternalServerErrorRequestError, NotFoundRequestError, RequestError, TimeoutRequestError, UnauthorizedRequestError, UnprocessableContentRequestError, isRequestError, request } from './shared/fetch/request.js';
+export { BadRequestError, ForbiddenRequestError, InternalServerErrorRequestError, NotFoundRequestError, RequestError, TimeoutRequestError, UnauthorizedRequestError, UnprocessableContentRequestError, isFormData, isJsonBody, isRequestError, request } from './shared/fetch/request.js';
 export { dataLayer } from './shared/ga/data-layer.js';
 export { GoogleAnalyticsProvider, useGoogleAnalyticsProvider } from './shared/ga/google-analytics-provider.js';
 export { isGAEvent } from './shared/ga/types.js';
@@ -287,16 +291,17 @@ export { environment, environments } from './shared/utils/environment.js';
 export { EventEmitter } from './shared/utils/event-emitter.js';
 export { clone, deepMerge, isPlainObject, default as main, merge } from './shared/utils/merge.js';
 export { currencies, formatPrice, getCurrencyByCountryCode } from './shared/utils/price.js';
+export { isPromise, wait } from './shared/utils/promise.js';
 export { random, randomInt } from './shared/utils/random.js';
 export { camelCase, capitalizeFirstLetter } from './shared/utils/string.js';
 export { TIME } from './shared/utils/time.js';
 export { has, hasNo } from './shared/utils/types.js';
 export { createUUID } from './shared/utils/uuid.js';
-export { wait } from './shared/utils/wait.js';
 export { Sidebar } from './sidebar/sidebar.js';
 export { SidebarDetectBreakpoint, SidebarProvider } from './sidebar/sidebar-provider.js';
 export { ToggleSidebarButton } from './sidebar/toggle-sidebar-button.js';
 export { useSidebar, useSidebarActions } from './sidebar/use-sidebar.js';
+export { SignInForm } from './sign-in-form/sign-in-form.js';
 export { Toast } from './toast/toast.js';
 export { ToastProvider } from './toast/toast-provider.js';
 export { useToast } from './toast/use-toast.js';

package/dist/info-icon-tooltip/info-icon-tooltip.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export interface InfoIconTooltipProps {
+    children: string | ReactNode;
+    className?: string;
+    variant?: 'solid' | 'stroke';
+}
+export declare function InfoIconTooltip({ children, className, variant, }: InfoIconTooltipProps): import("react/jsx-runtime").JSX.Element;

package/dist/info-icon-tooltip/info-icon-tooltip.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { SolidInformationIcon } from '../icons/solid/solid-information-icon.js';
+import { StrokeInformationIcon } from '../icons/stroke/stroke-information-icon.js';
+import { IconButton } from '../buttons/icon-button/icon-button.js';
+import { useFormattedMessage } from '../intl/use-formatted-message.js';
+import { Tooltip } from '../tooltip/tooltip.js';
+import styles from './info-icon-tooltip.module.css.js';
+
+function InfoIconTooltip({ children, className, variant = 'solid', }) {
+    const t = useFormattedMessage();
+    const triggerLabel = t('Information');
+    function Icon(props) {
+        return (jsx(IconButton, { ...props, className: clsx(styles.trigger), children: variant === 'stroke' ? (jsx(StrokeInformationIcon, { "aria-description": triggerLabel })) : (jsx(SolidInformationIcon, { "aria-description": triggerLabel })) }));
+    }
+    return (jsx(Tooltip, { className: clsx(className, styles['info-icon-tooltip'], styles[variant]), trigger: jsx(Icon, {}), children: children }));
+}
+
+export { InfoIconTooltip };

package/dist/info-icon-tooltip/info-icon-tooltip.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"info-icon-tooltip":"info-icon-tooltip-module-oR4nD","stroke":"info-icon-tooltip-module-5zfDr","trigger":"info-icon-tooltip-module-0lY-K"};
+
+export { styles as default };

package/dist/intl/translation-id.d.ts

@@ -1 +1 @@
-export type TranslationId = "'{0}' in all products" | "Try 'Search' and try to find the product you're looking for" | "Unfortnately, We found no articles for your search '{0}'" | ' to your account to manage your lists.' | 'Add order notes' | 'Add to list' | 'Address' | 'Amount: {0}' | 'An error occurred while processing your payment. Please try again.' | 'An unexpected error occured' | 'Are you looking for information about our service? Please visit our customer support page' | 'Are you sure you want to remove all items from your cart?' | 'Are you sure you want to remove this item from your cart?' | 'article' | 'articles' | 'As soon as possible' | 'Attention' | 'Billing address' | 'Billing and shipping address' | 'Billing and shipping information' | 'Cancel' | 'Cart' | 'Changing your address is currently not possible. Please contact customer support to change your address.' | 'Chosen filters' | 'City' | 'Clear filters' | 'Clear' | 'Click the button below to continue shopping.' | 'Company name' | 'Conceal value' | 'Continue shopping' | 'Continue' | 'Cost overview' | 'Country' | 'create account' | 'Create new list' | 'Delivery date' | 'Delivery expected in {0} {1}' | 'Double check your spelling' | 'Downloads' | 'Easily add your favorite products' | 'Edit billing address' | 'Edit shipping address' | 'Email' | 'Excl. VAT' | 'Explore by categories' | 'Exploring our products by category' | 'facet.categories' | 'facet.height' | 'facet.weight' | 'Features' | 'First name' | 'Fulfillment method' | 'General' | 'Hide filters' | 'Home' | 'Incl. VAT' | 'Includes' | 'Industry' | 'Language' | 'Last name' | 'List name already exists' | 'New list name' | 'of' | 'Order confirmation' | 'Order date' | 'Order number' | 'Order' | 'Pay by invoice' | 'Pay' | 'Payment method' | 'Payment' | 'pc' | 'Phone' | 'Pick up' | 'Pickup address' | 'Please enter a valid e-mail address' | 'Please enter a valid phone number' | 'Please Sign In' | 'PO Number' | 'Popular searches' | 'Postal Code' | 'Print' | 'Processing' | 'Product Features' | 'Product' | 'Products' | 'Quick access' | 'Recent searches' | 'Recently viewed' | 'Remove all' | 'Requested delivery date' | 'Reveal value' | 'Review and payment' | 'Save order' | 'Save' | 'Saved cart for later.' | 'Search' | 'Searching again using more general terms' | 'See all results' | 'Select a desired delivery date' | 'Select a list' | 'Selecting As Soon As Possible will enable us to send the products to you as they become available.' | 'Share your favorite list with others' | 'Ship' | 'Shipping address' | 'Shipping and handling' | 'Shipping details' | 'Shop more efficiently and quicker with a favorites list' | 'Show all' | 'Show filters' | 'Show less' | 'Show' | 'sign in' | 'Sonic address' | 'Sonic Equipment' | 'Sorry, there are no products found' | 'Sorry, we could not find matches for' | 'Sort by' | 'sort.newest' | 'sort.price_asc' | 'sort.price_desc' | 'sort.relevance' | 'Specifications' | 'Submit' | 'Subtotal' | 'Suggestions' | 'tag.limited' | 'tag.new' | 'The expected delivery is an indication based on the product availability and the shipping location.' | 'The product has been added to your cart.' | 'The product has been removed from your cart.' | 'The product has been updated in your cart.' | 'There are no products in your shopping cart.' | 'Total amount is' | 'Total' | 'Total' | 'Try another search' | 'Try another search' | 'Unable to add the product to your cart.' | 'Unable to add the product to your cart.' | 'Unable to empty your cart.' | 'Unable to empty your cart.' | 'Unable to remove the product from your cart.' | 'Unable to remove the product from your cart.' | 'Unable to save cart for later.' | 'Unable to save cart for later.' | 'Unable to update the product in your cart.' | 'Unable to update the product in your cart.' | 'Updating address' | 'Use billing address' | 'Use fewer keywords' | 'Validating' | 'validation.badInput' | 'validation.customError' | 'validation.invalid' | 'validation.patternMismatch' | 'validation.rangeOverflow' | 'validation.rangeUnderflow' | 'validation.stepMismatch' | 'validation.tooLong' | 'validation.tooShort' | 'validation.typeMismatch' | 'validation.valid' | 'validation.valueMissing' | 'VAT Number' | 'VAT' | 'Welcome to Sonic Equipment. Please choose your country and language below.' | 'What are you searching for?' | 'You could try checking the spelling of your search query' | 'You could try exploring our products by category' | 'You could try' | 'You must ' | 'Your cart has been emptied.' | 'Your favorites are available on multiple devices' | 'Your shopping cart is still empty';
+export type TranslationId = "'{0}' in all products" | "Try 'Search' and try to find the product you're looking for" | "Unfortnately, We found no articles for your search '{0}'" | ' to your account to manage your lists.' | 'Add order notes' | 'Add to list' | 'Address' | 'Amount: {0}' | 'An error occurred while processing your payment. Please try again.' | 'An unexpected error occured' | 'Are you looking for information about our service? Please visit our customer support page' | 'Are you sure you want to remove all items from your cart?' | 'Are you sure you want to remove this item from your cart?' | 'article' | 'articles' | 'As soon as possible' | 'Attention' | 'Billing address' | 'Billing and shipping address' | 'Billing and shipping information' | 'Cancel' | 'Cart' | 'Changing your address is currently not possible. Please contact customer support to change your address.' | 'Chosen filters' | 'City' | 'Clear filters' | 'Clear' | 'Click the button below to continue shopping.' | 'Company name' | 'Conceal value' | 'Continue shopping' | 'Continue' | 'Cost overview' | 'Country' | 'create account' | 'Create new list' | 'Delivery date' | 'Delivery expected in {0} {1}' | 'Double check your spelling' | 'Downloads' | 'Easily add your favorite products' | 'Edit billing address' | 'Edit shipping address' | 'Email' | 'Excl. VAT' | 'Explore by categories' | 'Exploring our products by category' | 'facet.categories' | 'facet.height' | 'facet.weight' | 'Features' | 'First name' | 'Forgot password?' | 'Fulfillment method' | 'General' | 'Hide filters' | 'Home' | 'Incl. VAT' | 'Includes' | 'Industry' | 'Information' | 'Language' | 'Last name' | 'List name already exists' | 'New list name' | 'New user?' | 'of' | 'Or sign in as guest' | 'Order number' | 'Order' | 'Order confirmation' | 'Order date' | 'Order number' | 'Order' | 'Pay by invoice' | 'Pay' | 'Payment method' | 'Payment' | 'Password' | 'pc' | 'Phone' | 'Pick up' | 'Pickup address' | 'Please enter a valid e-mail address' | 'Please enter a valid phone number' | 'Please Sign In' | 'PO Number' | 'Popular searches' | 'Postal Code' | 'Print' | 'Processing' | 'Product Features' | 'Product' | 'Products' | 'Quick access' | 'Recent searches' | 'Recently viewed' | 'Requested delivery date' | 'Remember me' | 'Remove all' | 'Requested delivery date' | 'Reveal value' | 'Review and payment' | 'Save order' | 'Save' | 'Saved cart for later.' | 'Search' | 'Searching again using more general terms' | 'See all results' | 'Select a desired delivery date' | 'Select a list' | 'Selecting As Soon As Possible will enable us to send the products to you as they become available.' | 'Share your favorite list with others' | 'Ship' | 'Shipping address' | 'Shipping and handling' | 'Shipping details' | 'Shop more efficiently and quicker with a favorites list' | 'Show all' | 'Show filters' | 'Show less' | 'Show' | 'sign in' | 'Sonic address' | 'Sonic Equipment' | 'Sorry, there are no products found' | 'Sorry, we could not find matches for' | 'Sort by' | 'sort.newest' | 'sort.price_asc' | 'sort.price_desc' | 'sort.relevance' | 'Specifications' | 'Submit' | 'Subtotal' | 'Suggestions' | 'tag.limited' | 'tag.new' | 'The expected delivery is an indication based on the product availability and the shipping location.' | 'The product has been added to your cart.' | 'The product has been removed from your cart.' | 'The product has been updated in your cart.' | 'There are no products in your shopping cart.' | 'Total amount is' | 'Total' | 'Total' | 'Try another search' | 'Try another search' | 'Unable to add the product to your cart.' | 'Unable to add the product to your cart.' | 'Unable to empty your cart.' | 'Unable to empty your cart.' | 'Unable to remove the product from your cart.' | 'Unable to remove the product from your cart.' | 'Unable to save cart for later.' | 'Unable to save cart for later.' | 'Unable to update the product in your cart.' | 'Unable to update the product in your cart.' | 'Updating address' | 'Use billing address' | 'Use fewer keywords' | 'Validating' | 'validation.badInput' | 'validation.customError' | 'validation.invalid' | 'validation.patternMismatch' | 'validation.rangeOverflow' | 'validation.rangeUnderflow' | 'validation.stepMismatch' | 'validation.tooLong' | 'validation.tooShort' | 'validation.typeMismatch' | 'validation.valid' | 'validation.valueMissing' | 'VAT Number' | 'VAT' | 'Welcome to Sonic Equipment. Please choose your country and language below.' | 'What are you searching for?' | 'You could try checking the spelling of your search query' | 'You could try exploring our products by category' | 'You could try' | 'You must ' | 'Your cart has been emptied.' | 'Your favorites are available on multiple devices' | 'Your shopping cart is still empty';

package/dist/pages/checkout/order-confirmation-page/order-confirmation-page-content.d.ts

@@ -0,0 +1,5 @@
+import { CartModel } from '../../../shared/api/storefront/model/storefront.model';
+export interface OrderConfirmationPageContentProps {
+    cart: CartModel;
+}
+export declare function OrderConfirmationPageContent({ cart, }: OrderConfirmationPageContentProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,83 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { PrintButton } from '../../../buttons/print-button/print-button.js';
+import { OrderLineCard } from '../../../cards/orderline-card/orderline-card.js';
+import { CartTotals } from '../../../cart-totals/cart-totals.js';
+import { InfoDisplay } from '../../../display/info-display/info-display.js';
+import { FormattedMessage } from '../../../intl/formatted-message.js';
+import { useCultureCode } from '../../../intl/use-culture-code.js';
+import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
+import { OrderLineList } from '../../../lists/orderline-list/orderline-list.js';
+import { useSaveCartForLater } from '../../../shared/api/storefront/hooks/cart/use-save-cart-for-later.js';
+import { RouteButton } from '../../../shared/routing/route-button.js';
+import { formatDateToLocaleString } from '../../../shared/utils/date.js';
+import { useToast } from '../../../toast/use-toast.js';
+import { Page } from '../../components/page/page.js';
+import { BillingAndInvoiceInformation } from '../components/billing-and-invoice-information.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 styles from './order-confirmation-page.module.css.js';
+
+function OrderConfirmationPageContent({ cart, }) {
+    const t = useFormattedMessage();
+    const { addToast } = useToast();
+    const cultureCode = useCultureCode();
+    const saveCartForLater = useSaveCartForLater({
+        onError: () => {
+            addToast({
+                body: jsx(FormattedMessage, { id: "Unable to save cart for later." }),
+                isUserDismissable: false,
+                messageType: 'danger',
+            });
+        },
+        onSuccess: () => {
+            addToast({
+                body: jsx(FormattedMessage, { id: "Saved cart for later." }),
+                isUserDismissable: false,
+                messageType: 'success',
+            });
+        },
+    });
+    return (jsx(Page, { breadCrumb: [{ href: CHECKOUT_PATHS.HOME, label: t('Home') }], title: t('Order confirmation'), children: jsx(CheckoutPageLayout, { actions: {
+                primary: (jsx(RouteButton, { withArrow: true, "data-test-selector": "checkoutShippingCartTotalContinueButton", href: "/", children: jsx(FormattedMessage, { id: "Continue shopping" }) })),
+                secondary: (jsxs(Fragment, { children: [cart.canSaveOrder && (jsx(RouteButton, { color: "secondary", onClick: () => {
+                                saveCartForLater.mutate({ cart });
+                            }, variant: "outline", children: jsx(FormattedMessage, { id: "Save order" }) })), jsx(PrintButton, {})] })),
+            }, overview: jsx(CartTotals, { fulfillmentMethod: t(`fulfillmentmethod.${cart.fulfillmentMethod}`), orderNumber: cart.orderNumber, shippingCost: cart.shippingAndHandlingDisplay, subtotal: cart.orderSubTotalDisplay, tax: cart.totalTaxDisplay, total: cart.orderGrandTotalDisplay, vatPercentage: cart.cartLines?.[0]?.pricing?.vatRate }), children: jsxs("div", { children: [jsx(CheckoutPageSection, { hasBorder: false, title: t('General'), children: jsx(CheckoutPageSectionContent, { children: jsxs("div", { className: styles['general-order-info'], children: [cart.orderDate && (jsx(InfoDisplay, { id: "order-date", label: t('Order date'), value: formatDateToLocaleString(new Date(cart.orderDate), cultureCode) })), cart.requestedDeliveryDateDisplay && (jsx(InfoDisplay, { id: "requested-delivery-date", label: t('Requested delivery date'), value: formatDateToLocaleString(new Date(cart.requestedDeliveryDateDisplay.toString()), cultureCode) })), cart.poNumber && (jsx(InfoDisplay, { id: "po-number", label: t('PO Number'), value: cart.poNumber }))] }) }) }), jsx(CheckoutPageSection, { hasBorder: false, title: t('Billing and shipping information'), children: jsx(CheckoutPageSectionContent, { children: jsx(BillingAndInvoiceInformation, { billToAddress: {
+                                    address1: cart.billTo?.address1,
+                                    address2: cart.billTo?.address2,
+                                    address3: cart.billTo?.address3,
+                                    city: cart.billTo?.city,
+                                    companyName: cart.billTo?.companyName,
+                                    country: cart.billTo?.country?.name,
+                                    email: cart.billTo?.email,
+                                    phone: cart.billTo?.phone,
+                                    postalCode: cart.billTo?.postalCode,
+                                }, shipToAddress: {
+                                    address1: cart.shipTo?.address1,
+                                    address2: cart.shipTo?.address2,
+                                    address3: cart.shipTo?.address3,
+                                    city: cart.shipTo?.city,
+                                    companyName: cart.shipTo?.companyName,
+                                    country: cart.shipTo?.country?.name,
+                                    email: cart.shipTo?.email,
+                                    phone: cart.shipTo?.phone,
+                                    postalCode: cart.shipTo?.postalCode,
+                                } }) }) }), jsx(CheckoutPageSection, { hasBorder: false, title: t('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 { OrderConfirmationPageContent };

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

@@ -1,36 +1,16 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { useEffect } from 'react';
-import { PrintButton } from '../../../buttons/print-button/print-button.js';
-import { OrderLineCard } from '../../../cards/orderline-card/orderline-card.js';
-import { CartTotals } from '../../../cart-totals/cart-totals.js';
-import { InfoDisplay } from '../../../display/info-display/info-display.js';
-import { FormattedMessage } from '../../../intl/formatted-message.js';
-import { useCultureCode } from '../../../intl/use-culture-code.js';
-import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
-import { OrderLineList } from '../../../lists/orderline-list/orderline-list.js';
 import { LoadingPage } from '../../loading-page/loading-page.js';
 import { useIsAuthenticated } from '../../../shared/api/storefront/hooks/authentication/use-is-authenticated.js';
 import { useFetchCartById } from '../../../shared/api/storefront/hooks/cart/use-fetch-cart-by-id.js';
-import { useSaveCartForLater } from '../../../shared/api/storefront/hooks/cart/use-save-cart-for-later.js';
-import { RouteButton } from '../../../shared/routing/route-button.js';
 import { useNavigate } from '../../../shared/routing/route-provider.js';
-import { formatDateToLocaleString } from '../../../shared/utils/date.js';
 import { hasNo } from '../../../shared/utils/types.js';
-import { useToast } from '../../../toast/use-toast.js';
-import { Page } from '../../components/page/page.js';
 import { ErrorPage } from '../../error-page/error-page.js';
-import { BillingAndInvoiceInformation } from '../components/billing-and-invoice-information.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 styles from './order-confirmation-page.module.css.js';
+import { OrderConfirmationPageContent } from './order-confirmation-page-content.js';
 
 function OrderConfirmationPage({ cartId }) {
     const isAuthenticated = useIsAuthenticated();
-    const t = useFormattedMessage();
-    const cultureCode = useCultureCode();
-    const { addToast } = useToast();
     const { isNavigating, navigate } = useNavigate();
     const { data: cart, error, isLoading: cartIsLoading, } = useFetchCartById({
         id: cartId,
@@ -45,22 +25,6 @@ function OrderConfirmationPage({ cartId }) {
         if (cart.status === 'Cart')
             navigate(CHECKOUT_PATHS.CART);
     }, [cart, navigate, isAuthenticated]);
-    const saveCartForLater = useSaveCartForLater({
-        onError: () => {
-            addToast({
-                body: jsx(FormattedMessage, { id: "Unable to save cart for later." }),
-                isUserDismissable: false,
-                messageType: 'danger',
-            });
-        },
-        onSuccess: () => {
-            addToast({
-                body: jsx(FormattedMessage, { id: "Saved cart for later." }),
-                isUserDismissable: false,
-                messageType: 'success',
-            });
-        },
-    });
     if (error)
         return jsx(ErrorPage, { error: error });
     if (cartIsLoading || isNavigating)
@@ -71,45 +35,7 @@ function OrderConfirmationPage({ cartId }) {
         cart.cartLines.length === 0) {
         return null;
     }
-    return (jsx(Page, { breadCrumb: [{ href: CHECKOUT_PATHS.HOME, label: t('Home') }], title: t('Order confirmation'), children: jsx(CheckoutPageLayout, { actions: {
-                primary: (jsx(RouteButton, { withArrow: true, "data-test-selector": "checkoutShippingCartTotalContinueButton", href: "/", children: jsx(FormattedMessage, { id: "Continue shopping" }) })),
-                secondary: (jsxs(Fragment, { children: [cart.canSaveOrder && (jsx(RouteButton, { color: "secondary", onClick: () => {
-                                saveCartForLater.mutate({ cart });
-                            }, variant: "outline", children: jsx(FormattedMessage, { id: "Save order" }) })), jsx(PrintButton, {})] })),
-            }, overview: jsx(CartTotals, { fulfillmentMethod: t(`fulfillmentmethod.${cart.fulfillmentMethod}`), orderNumber: cart.orderNumber, shippingCost: cart.shippingAndHandlingDisplay, subtotal: cart.orderSubTotalDisplay, tax: cart.totalTaxDisplay, total: cart.orderGrandTotalDisplay, vatPercentage: cart.cartLines[0]?.pricing?.vatRate }), children: jsxs("div", { children: [jsx(CheckoutPageSection, { hasBorder: false, title: t('General'), children: jsx(CheckoutPageSectionContent, { children: jsxs("div", { className: styles['general-order-info'], children: [cart.orderDate && (jsx(InfoDisplay, { id: "order-date", label: t('Order date'), value: formatDateToLocaleString(new Date(cart.orderDate), cultureCode) })), cart.requestedDeliveryDate && (jsx(InfoDisplay, { id: "requested-delivery-date", label: t('Requested delivery date'), value: formatDateToLocaleString(new Date(cart.requestedDeliveryDate), cultureCode) })), cart.poNumber && (jsx(InfoDisplay, { id: "po-number", label: t('PO Number'), value: cart.poNumber }))] }) }) }), jsx(CheckoutPageSection, { hasBorder: false, title: t('Billing and shipping information'), children: jsx(CheckoutPageSectionContent, { children: jsx(BillingAndInvoiceInformation, { billToAddress: {
-                                    address1: cart.billTo?.address1,
-                                    address2: cart.billTo?.address2,
-                                    address3: cart.billTo?.address3,
-                                    city: cart.billTo?.city,
-                                    companyName: cart.billTo?.companyName,
-                                    country: cart.billTo?.country?.name,
-                                    email: cart.billTo?.email,
-                                    phone: cart.billTo?.phone,
-                                    postalCode: cart.billTo?.postalCode,
-                                }, shipToAddress: {
-                                    address1: cart.shipTo?.address1,
-                                    address2: cart.shipTo?.address2,
-                                    address3: cart.shipTo?.address3,
-                                    city: cart.shipTo?.city,
-                                    companyName: cart.shipTo?.companyName,
-                                    country: cart.shipTo?.country?.name,
-                                    email: cart.shipTo?.email,
-                                    phone: cart.shipTo?.phone,
-                                    postalCode: cart.shipTo?.postalCode,
-                                } }) }) }), jsx(CheckoutPageSection, { hasBorder: false, title: t('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(OrderConfirmationPageContent, { cart: cart });
 }
 
 export { OrderConfirmationPage };

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": "checkoutShippingCartTotalContinueButton", 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 };