@sonic-equipment/ui 123.0.0 → 124.0.0

package/dist/buttons/add-to-cart-button/add-to-cart-button.js

@@ -72,7 +72,7 @@ function SpinnerState({ isDisabled, onChange, onManualInput, quantity, }) {
     useEffect(() => {
         setInternalQuantity(quantity);
     }, [quantity]);
-    return (jsx(NumberField, { withButtons: true, autoGrow: true, formatOptions: {
+    return (jsx(NumberField, { withButtons: true, autoGrow: true, "data-test-selector": "quantity", formatOptions: {
             maximumFractionDigits: 0,
             style: 'decimal',
             useGrouping: false,
@@ -95,7 +95,7 @@ function ManualInputState({ isDisabled, onCancel, onConfirm, quantity, }) {
         if (e.key === 'Escape')
             onCancel();
     };
-    return (jsxs("div", { className: styles['manual-input-container'], children: [jsx("div", { className: styles['left-button-spacer'] }), jsx(NumberField, { autoFocus: true, autoGrow: true, defaultValue: quantity ? ensureNumber(quantity) : undefined, formatOptions: {
+    return (jsxs("div", { className: styles['manual-input-container'], children: [jsx("div", { className: styles['left-button-spacer'] }), jsx(NumberField, { autoFocus: true, autoGrow: true, "data-test-selector": "quantity", defaultValue: quantity ? ensureNumber(quantity) : undefined, formatOptions: {
                     maximumFractionDigits: 0,
                     style: 'decimal',
                     useGrouping: false,

package/dist/buttons/add-to-cart-button/connected-add-to-cart-button.js

@@ -5,11 +5,13 @@ import { useAddProductToCurrentCart } from '../../shared/api/storefront/hooks/ca
 import { useDeleteCartLineById } from '../../shared/api/storefront/hooks/cart/use-delete-cart-line-by-id.js';
 import { useFetchCurrentCartLines } from '../../shared/api/storefront/hooks/cart/use-fetch-current-cart-lines.js';
 import { useUpdateCartLineById } from '../../shared/api/storefront/hooks/cart/use-update-cart-line-by-id.js';
+import { useDataLayer } from '../../shared/ga/use-data-layer.js';
 import { useCartEvents } from '../../shared/providers/cart-provider.js';
 import { useToast } from '../../toast/use-toast.js';
 import { AddToCartButton } from './add-to-cart-button.js';
 
 const ConnectedAddToCartButton = ({ onAddToCart, productId }) => {
+    const { createEcommerceEvent, dataLayer } = useDataLayer();
     const { isPending: isPendingAddToCart, mutate: addToCart } = useAddProductToCurrentCart();
     const { data: cartLines, isLoading: isLoadingCartLines } = useFetchCurrentCartLines();
     const { isPending: isPendingDeleteCartLine, mutate: deleteCartLine } = useDeleteCartLineById();
@@ -77,6 +79,12 @@ const ConnectedAddToCartButton = ({ onAddToCart, productId }) => {
                 onSuccess: cartLine => {
                     onAddToCart?.({ cartLine });
                     onCartLineAdded?.(cartLine);
+                    dataLayer.push(createEcommerceEvent({
+                        cartLine,
+                        event: {
+                            event: 'add_to_cart',
+                        },
+                    }));
                     addToast({
                         body: (jsx(FormattedMessage, { id: "The product has been added to your cart." })),
                         isUserDismissable: false,

package/dist/buttons/button/button.d.ts

@@ -9,10 +9,11 @@ export interface ButtonProps {
     icon?: React.ReactNode;
     iconPosition?: 'left' | 'right';
     isDisabled?: boolean;
+    isLoading?: string | ReactNode | boolean;
     onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
     size?: 'sm' | 'md' | 'lg';
     type?: 'button' | 'submit' | 'reset';
     variant?: 'solid' | 'outline' | 'ghost';
     withArrow?: boolean;
 }
-export declare function Button({ _pseudo, children, className, color, condensed, 'data-test-selector': dataTestSelector, icon, iconPosition, isDisabled, onClick: _onClick, size, type, variant, withArrow, }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function Button({ _pseudo, children, className, color, condensed, 'data-test-selector': dataTestSelector, icon, iconPosition, isDisabled, isLoading, onClick: _onClick, size, type, variant, withArrow, }: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/buttons/button/button.js

@@ -1,10 +1,12 @@
 "use client";
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { isValidElement } from 'react';
 import clsx from 'clsx';
+import { ProgressCircle } from '../../loading/progress-circle.js';
 import { GlyphsArrowBoldCapsRightIcon } from '../../icons/glyph/glyphs-arrow-boldcaps-right-icon.js';
 import buttonStyles from './button.module.css.js';
 
-function Button({ _pseudo = 'none', children, className, color = 'primary', condensed, 'data-test-selector': dataTestSelector, icon, iconPosition = 'left', isDisabled, onClick: _onClick, size = 'lg', type = 'button', variant = 'solid', withArrow = false, }) {
+function Button({ _pseudo = 'none', children, className, color = 'primary', condensed, 'data-test-selector': dataTestSelector, icon, iconPosition = 'left', isDisabled, isLoading = false, onClick: _onClick, size = 'lg', type = 'button', variant = 'solid', withArrow = false, }) {
     const showIconOnLeft = icon && iconPosition === 'left';
     const showIconOnRight = icon && iconPosition === 'right';
     const onClick = (e) => {
@@ -15,7 +17,10 @@ function Button({ _pseudo = 'none', children, className, color = 'primary', cond
             return;
         e.preventDefault();
     };
-    return (jsxs("button", { className: clsx({ [buttonStyles.condensed]: condensed }, { [buttonStyles.icon]: icon }, buttonStyles.button, buttonStyles[variant], buttonStyles[size], buttonStyles[color], buttonStyles[_pseudo], className), "data-disabled": isDisabled ? true : undefined, "data-test-selector": dataTestSelector, disabled: isDisabled, onClick: onClick, type: type, children: [jsx(Fragment, { children: showIconOnLeft && jsx("span", { className: buttonStyles.icon, children: icon }) }), children, withArrow && (jsx(GlyphsArrowBoldCapsRightIcon, { className: buttonStyles['right-arrow-icon'] })), showIconOnRight && jsx("span", { className: buttonStyles.icon, children: icon })] }));
+    return (jsx("button", { className: clsx({ [buttonStyles.condensed]: condensed }, { [buttonStyles.icon]: icon }, { [buttonStyles['loading-uninformative']]: isLoading === true }, {
+            [buttonStyles['loading-informative']]: isLoading &&
+                (typeof isLoading === 'string' || isValidElement(isLoading)),
+        }, buttonStyles.button, buttonStyles[variant], buttonStyles[size], buttonStyles[color], buttonStyles[_pseudo], className), "data-disabled": isDisabled ? true : undefined, "data-test-selector": dataTestSelector, disabled: isDisabled, onClick: onClick, type: type, children: jsxs(Fragment, { children: [showIconOnLeft && jsx("span", { className: buttonStyles.icon, children: icon }), jsx("span", { className: buttonStyles.children, children: isLoading ? (isLoading === true ? children : isLoading) : children }), withArrow && (jsx(GlyphsArrowBoldCapsRightIcon, { className: buttonStyles['right-arrow-icon'] })), showIconOnRight && jsx("span", { className: buttonStyles.icon, children: icon }), isLoading && (jsx(ProgressCircle, { className: buttonStyles.spinner, size: "sm", variant: color === 'primary' ? 'white' : 'gray' }))] }) }));
 }
 
 export { Button };

package/dist/buttons/button/button.module.css.js

@@ -1,3 +1,3 @@
-var buttonStyles = {"button":"button-module-V4meK","icon":"button-module-XaNWz","sm":"button-module-Pbwz7","md":"button-module-GVTEW","condensed":"button-module-GKHQc","lg":"button-module-nyNY8","primary":"button-module-tmyk8","outline":"button-module-vq9GI","solid":"button-module-AjvlY","hover":"button-module-YzPAr","focus":"button-module--xzsY","active":"button-module-XMFzj","ghost":"button-module-f4UVe","right-arrow-icon":"button-module-ydQAo","secondary":"button-module--1bCH"};
+var buttonStyles = {"button":"button-module-V4meK","icon":"button-module-XaNWz","loading-uninformative":"button-module-LwuW2","loading-informative":"button-module-U5IxM","spinner":"button-module-13ndF","children":"button-module-vqRq-","primary":"button-module-tmyk8","secondary":"button-module--1bCH","sm":"button-module-Pbwz7","md":"button-module-GVTEW","condensed":"button-module-GKHQc","lg":"button-module-nyNY8","outline":"button-module-vq9GI","solid":"button-module-AjvlY","hover":"button-module-YzPAr","focus":"button-module--xzsY","active":"button-module-XMFzj","ghost":"button-module-f4UVe","right-arrow-icon":"button-module-ydQAo"};
 
 export { buttonStyles as default };

package/dist/exports.d.ts

@@ -217,6 +217,10 @@ export * from './shared/api/storefront/services/website-service';
 export * from './shared/api/storefront/services/wishlist-service';
 export * from './shared/feature-flags/use-feature-flags';
 export * from './shared/fetch/request';
+export * from './shared/ga/data-layer';
+export * from './shared/ga/google-analytics-provider';
+export * from './shared/ga/types';
+export * from './shared/ga/use-data-layer';
 export * from './shared/hooks/use-breakpoint';
 export * from './shared/hooks/use-cookie';
 export * from './shared/hooks/use-debounced-callback';

package/dist/forms/number-field/number-field.d.ts

@@ -4,6 +4,7 @@ export type NumberFieldSize = 'md' | 'lg';
 interface NumberFieldProps {
     autoFocus?: boolean;
     autoGrow?: boolean;
+    'data-test-selector'?: string;
     defaultValue?: number;
     formatOptions?: Intl.NumberFormatOptions;
     isDisabled?: boolean;
@@ -29,5 +30,5 @@ interface NumberFieldProps {
  * This component is used to create a number field.
  * This field can also grow when a user types in text.
  */
-export declare function NumberField({ autoFocus, autoGrow, defaultValue, formatOptions, isDisabled, isInvalid, isReadOnly, isRequired, label, maxLength, maxValue, minValue, name, onChange, onInput, onKeyUp, placeholder, showLabel, size, validate, value, withButtons, }: NumberFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function NumberField({ autoFocus, autoGrow, 'data-test-selector': dataTestSelector, defaultValue, formatOptions, isDisabled, isInvalid, isReadOnly, isRequired, label, maxLength, maxValue, minValue, name, onChange, onInput, onKeyUp, placeholder, showLabel, size, validate, value, withButtons, }: NumberFieldProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/forms/number-field/number-field.js

@@ -15,12 +15,12 @@ import styles from './number-field.module.css.js';
  * This component is used to create a number field.
  * This field can also grow when a user types in text.
  */
-function NumberField({ autoFocus, autoGrow, defaultValue, formatOptions = { style: 'decimal', useGrouping: false }, isDisabled, isInvalid, isReadOnly, isRequired, label, maxLength, maxValue, minValue, name, onChange, onInput, onKeyUp, placeholder, showLabel = false, size = 'lg', validate, value, withButtons, }) {
+function NumberField({ autoFocus, autoGrow, 'data-test-selector': dataTestSelector, defaultValue, formatOptions = { style: 'decimal', useGrouping: false }, isDisabled, isInvalid, isReadOnly, isRequired, label, maxLength, maxValue, minValue, name, onChange, onInput, onKeyUp, placeholder, showLabel = false, size = 'lg', validate, value, withButtons, }) {
     const inputRef = useRef(null);
-    return (jsxs(NumberField$1, { "aria-label": label, autoFocus: autoFocus, className: clsx(styles.field, styles[size]), defaultValue: defaultValue, formatOptions: formatOptions, isDisabled: isDisabled, isInvalid: isInvalid, isReadOnly: isReadOnly, isRequired: isRequired, maxValue: maxValue, minValue: minValue, name: name, onChange: onChange, onInput: onInput, validate: validate, value: value, children: [showLabel && jsx(Label, { isRequired: isRequired, children: label }), jsxs("div", { className: styles['button-input-container'], children: [withButtons && (jsx(Button, { "data-test-selector": "decrement", isDisabled: isDisabled, 
+    return (jsxs(NumberField$1, { "aria-label": label, autoFocus: autoFocus, className: clsx(styles.field, styles[size]), "data-test-selector": dataTestSelector, defaultValue: defaultValue, formatOptions: formatOptions, isDisabled: isDisabled, isInvalid: isInvalid, isReadOnly: isReadOnly, isRequired: isRequired, maxValue: maxValue, minValue: minValue, name: name, onChange: onChange, onInput: onInput, validate: validate, value: value, children: [showLabel && jsx(Label, { isRequired: isRequired, children: label }), jsxs("div", { className: styles['button-input-container'], children: [withButtons && (jsx(Button, { "data-test-selector": "decrement", isDisabled: isDisabled, 
                         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                         // @ts-expect-error
-                        onClick: e => e.preventDefault(), onPressStart: e => e.target.focus(), slot: "decrement", children: (value || 0) <= 1 ? jsx(StrokeTrashIcon, {}) : jsx(StrokeCollapseIcon, {}) })), jsx(Input, { ref: inputRef, autoGrow: autoGrow, label: label, maxLength: maxLength, onFocus: e => (e.target.selectionStart = e.target.value.length || 0), onKeyUp: e => onKeyUp?.(e), placeholder: placeholder, size: size }), withButtons && (jsx(Button, { "data-test-selector": "increment", isDisabled: isDisabled, 
+                        onClick: e => e.preventDefault(), onPressStart: e => e.target.focus(), slot: "decrement", children: (value || 0) <= 1 ? jsx(StrokeTrashIcon, {}) : jsx(StrokeCollapseIcon, {}) })), jsx(Input, { ref: inputRef, autoGrow: autoGrow, "data-test-selector": "value", label: label, maxLength: maxLength, onFocus: e => (e.target.selectionStart = e.target.value.length || 0), onKeyUp: e => onKeyUp?.(e), placeholder: placeholder, size: size }), withButtons && (jsx(Button, { "data-test-selector": "increment", isDisabled: isDisabled, 
                         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                         // @ts-expect-error
                         onClick: e => e.preventDefault(), onPressStart: e => e.target.focus(), slot: "increment", children: jsx(StrokeExpandIcon, {}) }))] }), jsx(FieldError, {})] }));

package/dist/forms/select/select.d.ts

@@ -1,7 +1,10 @@
 export interface SelectProps<T> {
     'data-test-selector'?: string;
+    defaultSelectedOption?: keyof T;
     isDisabled?: boolean;
+    isRequired?: boolean;
     label: string;
+    name?: string;
     onChange: (value: keyof T) => void;
     options: T;
     placeholder?: string;
@@ -11,4 +14,4 @@ export interface SelectProps<T> {
     size?: 'sm' | 'md';
     variant?: 'outline' | 'solid';
 }
-export declare function Select<T extends object>({ 'data-test-selector': dataTestSelector, isDisabled, label, onChange, options, placeholder, selectedOption, showLabel, showPlaceholder, size, variant, }: SelectProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function Select<T extends Record<string, string>>({ 'data-test-selector': dataTestSelector, defaultSelectedOption, isDisabled, isRequired, label, name, onChange, options, placeholder, selectedOption, showLabel, showPlaceholder, size, variant, }: SelectProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/forms/select/select.js

@@ -5,10 +5,11 @@ import { Select as Select$1, Button, SelectValue, Popover, ListBox, Section, Hea
 import clsx from 'clsx';
 import { GlyphsChevronsSlimDownIcon } from '../../icons/glyph/glyphs-chevrons-slim-down-icon.js';
 import { StrokeCheckmarkIcon } from '../../icons/stroke/stroke-checkmark-icon.js';
+import { FieldError } from '../field-error/field-error.js';
 import { Label } from '../label/label.js';
 import styles from './select.module.css.js';
 
-function Select({ 'data-test-selector': dataTestSelector, isDisabled = false, label, onChange, options, placeholder, selectedOption, showLabel = true, showPlaceholder = true, size = 'md', variant = 'outline', }) {
+function Select({ 'data-test-selector': dataTestSelector, defaultSelectedOption, isDisabled = false, isRequired = false, label, name, onChange, options, placeholder, selectedOption, showLabel = true, showPlaceholder = true, size = 'md', variant = 'outline', }) {
     const selectRef = useRef(null);
     useEffect(() => {
         const updateWidth = () => {
@@ -23,9 +24,11 @@ function Select({ 'data-test-selector': dataTestSelector, isDisabled = false, la
         window.addEventListener('resize', updateWidth);
         return () => window?.removeEventListener('resize', updateWidth);
     }, []);
-    return (jsxs(Select$1, { ref: selectRef, "aria-label": label, className: clsx(styles.select, styles[size], styles[variant]), "data-test-selector": dataTestSelector, isDisabled: isDisabled, onSelectionChange: selected => onChange(selected), placeholder: placeholder || label, selectedKey: String(selectedOption), children: [showLabel && jsx(Label, { children: label }), jsxs(Button, { className: styles.button, children: [jsx(SelectValue, { "data-test-selector": "value" }), jsx(GlyphsChevronsSlimDownIcon, { "aria-hidden": "true", className: styles.chevron })] }), jsx(Popover, { ref: ref => 
+    return (jsxs(Select$1, { ref: selectRef, "aria-label": label, className: clsx(styles.select, styles[size], styles[variant]), "data-test-selector": dataTestSelector, defaultSelectedKey: defaultSelectedOption === undefined
+            ? undefined
+            : String(defaultSelectedOption), isDisabled: isDisabled, isRequired: isRequired, name: name, onSelectionChange: selected => onChange(selected), placeholder: placeholder || label, selectedKey: selectedOption === undefined ? undefined : String(selectedOption), children: [showLabel && jsx(Label, { isRequired: isRequired, children: label }), jsxs(Button, { className: styles.button, children: [jsx(SelectValue, { "data-test-selector": "value" }), jsx(GlyphsChevronsSlimDownIcon, { "aria-hidden": "true", className: styles.chevron })] }), jsx(FieldError, {}), jsx(Popover, { ref: ref => 
                 // Workaround for react/react-aria #1513
-                ref?.addEventListener('touchend', e => e.preventDefault()), className: clsx(styles.popover, styles[variant]), placement: "bottom left", triggerRef: selectRef, children: jsx(ListBox, { className: styles.listbox, "data-test-selector": dataTestSelector ? `${dataTestSelector}_options` : undefined, children: jsxs(Section, { children: [showPlaceholder && (jsx(Header, { className: styles.header, children: placeholder || label })), Object.entries(options).map(([key, value]) => (jsxs(ListBoxItem, { "aria-label": value, className: styles.item, id: key, textValue: value, children: [selectedOption === key && (jsx("span", { slot: "description", children: jsx(StrokeCheckmarkIcon, { className: styles.check }) })), jsx("span", { slot: "label", children: value })] }, key)))] }) }) })] }));
+                ref?.addEventListener('touchend', e => e.preventDefault()), className: clsx(styles.popover, styles[variant]), placement: "bottom left", children: jsx(ListBox, { className: styles.listbox, "data-test-selector": dataTestSelector ? `${dataTestSelector}_options` : undefined, children: jsxs(Section, { children: [showPlaceholder && (jsx(Header, { className: styles.header, children: placeholder || label })), Object.entries(options).map(([key, value]) => (jsxs(ListBoxItem, { "aria-label": value, className: styles.item, id: key, textValue: value, children: [selectedOption === key && (jsx("span", { slot: "description", children: jsx(StrokeCheckmarkIcon, { className: styles.check }) })), jsx("span", { slot: "label", children: value })] }, key)))] }) }) })] }));
 }
 
 export { Select };

package/dist/index.js

@@ -219,6 +219,10 @@ export { fetchCountries, fetchCountriesLanguages, fetchCountriesWithLanguages, f
 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 { dataLayer } from './shared/ga/data-layer.js';
+export { GoogleAnalyticsProvider, useGoogleAnalyticsProvider } from './shared/ga/google-analytics-provider.js';
+export { isGAEvent } from './shared/ga/types.js';
+export { useDataLayer } from './shared/ga/use-data-layer.js';
 export { useBreakpoint } from './shared/hooks/use-breakpoint.js';
 export { useCookie } from './shared/hooks/use-cookie.js';
 export { useDebouncedCallback } from './shared/hooks/use-debounced-callback.js';

package/dist/loading/progress-circle.d.ts

@@ -1,4 +1,6 @@
 export interface ProgressCircleProps {
     className?: string;
+    size?: 'sm' | 'lg';
+    variant?: 'white' | 'gray';
 }
-export declare function ProgressCircle({ className }: ProgressCircleProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProgressCircle({ className, size, variant, }: ProgressCircleProps): import("react/jsx-runtime").JSX.Element;

package/dist/loading/progress-circle.js

@@ -1,9 +1,9 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import styles from './progress-circle.module.css.js';
 
-function ProgressCircle({ className }) {
-    return (jsxs("svg", { className: clsx(styles['progress-circle'], className), viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", children: [jsx("title", { children: "Spinner" }), jsxs("defs", { children: [jsx("pattern", { height: "100%", id: "pattern-1", patternUnits: "objectBoundingBox", width: "100%", children: jsx("use", { xlinkHref: "#image-2" }) }), jsx("image", { height: "24", id: "image-2", width: "24", xlinkHref: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAGKADAAQAAAABAAAAGAAAAADiNXWtAAAB7UlEQVRIDZ2VSaoCQQyG01rOoBtBr+YZXXsFL+BGEHcqDuCE89SPL480hdpiGYil3an/S1KDUavViq/Xq1wul8RPp5Ocz2dhPB6PiR8OB42RAHO5XE7D4zgW/PF4CM/u97tks1n1TCYjURSpB2hraALglw8BQGXOuQQSKk68y+fzL9lRBQAqAUIlVkUoxBUKBZ3sC1irbrdbUoX/PgTyAqDXmFVBBVRCFfYuGMBk67UvRCUA2FFAfgKUSiWhFTgQA9ESjLVgC7NWwEPNFYtFFUEICJnigAxCFbvd7jcAFVi/gbDoCALmOzCMAzebzUILEFculxVgOwcIDqRSqaiTBDadToMhziYDwBgNRmW0rdFoSLPZ1PeDwUDHbz+iTqejyv5VYHuekbVggavVqkLq9fq32hqnLTJxdgmijPQeYSqs1Woa3G63g8QJ1haZKMJkjDgLjLi/Nbvd7m8ARCxry9x2jyn2ej2ZTCb28+tRK/Azpy3vrN/vy2azeffq4zM9aLTFP1jPM4bDoWbPH06o6WXn9/lZgDMxGo1kuVwG/5uhlfkkTsB4PJb5fC7b7VYPH89C7P9GS5nBLYr4er2W/X6vhy4lNPXxR8BisdDWkD13Ee0KtVQAgqvVSncO2XNlc3WEWirAxLmmgf0K+ANZ6DTlvO5jwwAAAABJRU5ErkJggg==" })] }), jsx("g", { fill: "none", fillRule: "evenodd", id: "Page-1", stroke: "none", strokeWidth: "1", children: jsx("path", { d: "M12,0 C18.627417,0 24,5.372583 24,12 C24,14.7277828 23.0855773,17.3196292 21.4324752,19.4188392 C19.1717866,22.2895997 15.7255176,24 12,24 C11.2636203,24 10.6666667,23.4030463 10.6666667,22.6666667 C10.6666667,21.930287 11.2636203,21.3333333 12,21.3333333 C14.8994206,21.3333333 17.5771113,20.0043823 19.3374325,17.7690188 C20.6234737,16.1359252 21.3333333,14.1238938 21.3333333,12 C21.3333333,6.84534234 17.1546577,2.66666667 12,2.66666667 C6.84534234,2.66666667 2.66666667,6.84534234 2.66666667,12 C2.66666667,14.4546154 3.61656005,16.756214 5.28844833,18.485859 C5.80023235,19.015323 5.78589988,19.8594213 5.25643588,20.3712053 C4.72697187,20.8829893 3.88287357,20.8686569 3.37108955,20.3391928 C1.22326178,18.1171666 0,15.1531945 0,12 C0,5.372583 5.372583,0 12,0 Z", fill: "url(#pattern-1)", fillRule: "nonzero", id: "Spinner" }) })] }));
+function ProgressCircle({ className, size = 'lg', variant = 'white', }) {
+    return (jsx("span", { className: clsx(styles['progress-circle'], styles[variant], styles[size], className) }));
 }
 
 export { ProgressCircle };

package/dist/loading/progress-circle.module.css.js

@@ -1,3 +1,3 @@
-var styles = {"progress-circle":"progress-circle-module-4nweP","spin":"progress-circle-module-kCf7K"};
+var styles = {"progress-circle":"progress-circle-module-4nweP","spin":"progress-circle-module-kCf7K","white":"progress-circle-module-SHNFy","gray":"progress-circle-module-TRZWO","sm":"progress-circle-module--Gspu","md":"progress-circle-module-4tRZd"};
 
 export { styles as default };

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

@@ -4,6 +4,7 @@ import { ConnectedProductCard } from '../../cards/product-card/connected-product
 import { CardCarousel } from '../../carousel/card-carousel/card-carousel.js';
 import { ProductUSPCarousel } from '../../carousel/usp-carousel/product-usp-carousel.js';
 import { FormattedMessage } from '../../intl/formatted-message.js';
+import { useDataLayer } from '../../shared/ga/use-data-layer.js';
 import { Heading } from '../../typography/heading/heading.js';
 import { ProductDetailsPageLayout } from '../layouts/product-details-page-layout/product-details-page-layout.js';
 import { Page } from '../page/page.js';
@@ -13,6 +14,12 @@ import { ProductDetailsRecentlyViewed } from './components/product-details-recen
 
 function ProductDetails({ data, priceComponent, recentlyViewedComponent, }) {
     const { breadCrumb, included, product, recentlyViewed, usps } = data;
+    useDataLayer({
+        event: {
+            event: 'view_item',
+        },
+        product,
+    });
     return (jsx(Page, { breadCrumb: breadCrumb, children: jsx(ProductDetailsPageLayout, { imageGallery: jsx(ProductDetailImages, { images: product.images }), included: included !== undefined &&
                 included.length > 0 && (jsxs(Fragment, { children: [jsx(Heading, { size: "s", tag: "h2", children: jsx(FormattedMessage, { id: "Includes" }) }), jsx(CardCarousel, { allowExpandToGrid: true, hasOverflow: true, cards: included.map(product => (jsx(ConnectedProductCard, { href: product.href, id: product.productId, image: {
                                 fit: 'contain',

package/dist/shared/api/bff/model/bff.model.d.ts

@@ -120,6 +120,7 @@ export interface ProductDetails {
     storefrontId: string;
     tags?: string[];
     unitListPrice: number;
+    unitListPriceDisplay: string;
 }
 export interface Usp {
     heading: string;

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

@@ -0,0 +1,2 @@
+import type { GADataLayerEvent } from './types';
+export declare const dataLayer: GADataLayerEvent[];

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

@@ -0,0 +1,13 @@
+const _dataLayer = [];
+_dataLayer.push = (function (_push) {
+    return (...items) => {
+        // eslint-disable-next-line no-console
+        console.log('dataLayer.push', items.length === 1 ? items[0] : items);
+        return _push(...items);
+    };
+})(_dataLayer.push.bind(_dataLayer));
+const dataLayer = 
+// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
+typeof window === 'undefined' ? _dataLayer : (window.dataLayer ?? _dataLayer);
+
+export { dataLayer };

package/dist/shared/ga/google-analytics-provider.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export declare function useGoogleAnalyticsProvider(): {
+    customerNumber: string | undefined;
+    isFetching: boolean;
+};
+export declare function GoogleAnalyticsProvider({ children }?: {
+    children?: ReactNode;
+}): string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<ReactNode> | null;

package/dist/shared/ga/google-analytics-provider.js

@@ -0,0 +1,15 @@
+"use client";
+import { useFetchSession } from '../api/storefront/hooks/authentication/use-fetch-session.js';
+
+function useGoogleAnalyticsProvider() {
+    const { data: session, isFetching } = useFetchSession();
+    return { customerNumber: session?.billTo?.customerNumber, isFetching };
+}
+function GoogleAnalyticsProvider({ children = null } = { children: null }) {
+    const { isFetching } = useGoogleAnalyticsProvider();
+    if (isFetching)
+        return null;
+    return children;
+}
+
+export { GoogleAnalyticsProvider, useGoogleAnalyticsProvider };

package/dist/shared/ga/types.d.ts

@@ -0,0 +1,34 @@
+export interface GABaseEvent {
+    [key: string]: any;
+    event: string;
+    eventAction?: string;
+    eventCategory?: string;
+    eventLabel?: string;
+    eventValue?: number;
+}
+export declare function isGAEvent(event: any): event is GABaseEvent;
+export interface GAEcommerceEvent extends GABaseEvent {
+    ecommerce?: {
+        [key: string]: any;
+        currencyCode?: string;
+        items?: Array<{
+            [key: string]: any;
+            item_category?: string;
+            item_id?: string;
+            item_name?: string;
+            price?: number;
+            quantity?: number;
+        }>;
+    };
+}
+export interface GAPageviewEvent extends GABaseEvent {
+    page_location?: string;
+    page_path?: string;
+    page_title?: string;
+}
+export type GADataLayerEvent = GABaseEvent | GAEcommerceEvent | GAPageviewEvent;
+declare global {
+    interface Window {
+        dataLayer?: GADataLayerEvent[];
+    }
+}

package/dist/shared/ga/types.js

@@ -0,0 +1,8 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+function isGAEvent(event) {
+    return (typeof event === 'object' &&
+        'event' in event &&
+        typeof event.event === 'string');
+}
+
+export { isGAEvent };

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

@@ -0,0 +1,50 @@
+import { CartModel } from '../api/storefront/model/shop.model';
+import { type GADataLayerEvent, type GAEcommerceEvent } from './types';
+interface GAProductModel {
+    price?: number;
+    productNumber: string;
+    productTitle: string;
+    unitListPrice: number;
+    unitListPriceDisplay: string;
+}
+interface GACartModel {
+    cartLines: CartModel['cartLines'];
+    currencySymbol: string;
+    orderSubTotal: number;
+}
+interface GACartLineModel {
+    erpNumber: string;
+    pricing: {
+        actualPrice: number;
+        actualPriceDisplay: string;
+    } | null;
+    productName: string;
+    qtyOrdered: number | null;
+}
+interface CreateEcommerceEventArgsWithCartLine {
+    cartLine: GACartLineModel;
+    event: GAEcommerceEvent;
+}
+interface CreateEcommerceEventArgsWithCart {
+    event: GAEcommerceEvent;
+    product: GAProductModel;
+}
+interface CreateEcommerceEventArgsWithProduct {
+    cart: GACartModel;
+    event: GAEcommerceEvent;
+}
+interface CreateEcommerceEvent {
+    (args: CreateEcommerceEventArgsWithCart): GAEcommerceEvent;
+    (args: CreateEcommerceEventArgsWithCartLine): GAEcommerceEvent;
+    (args: CreateEcommerceEventArgsWithProduct): GAEcommerceEvent;
+}
+interface UseDataLayerReturnValue {
+    createEcommerceEvent: CreateEcommerceEvent;
+    dataLayer: GADataLayerEvent[];
+}
+export declare function useDataLayer(): UseDataLayerReturnValue;
+export declare function useDataLayer(event: GADataLayerEvent): UseDataLayerReturnValue;
+export declare function useDataLayer(args: CreateEcommerceEventArgsWithProduct): UseDataLayerReturnValue;
+export declare function useDataLayer(args: CreateEcommerceEventArgsWithCartLine): UseDataLayerReturnValue;
+export declare function useDataLayer(args: CreateEcommerceEventArgsWithCart): UseDataLayerReturnValue;
+export {};

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

@@ -0,0 +1,89 @@
+import { useCallback, useEffect } from 'react';
+import { currencySymbolToISO } from '../model/currency.js';
+import { dataLayer } from './data-layer.js';
+import { useGoogleAnalyticsProvider } from './google-analytics-provider.js';
+import { isGAEvent } from './types.js';
+
+function useDataLayer(eventOrArgs) {
+    const { customerNumber } = useGoogleAnalyticsProvider();
+    const createEcommerceEvent = useCallback(({ cart, cartLine, event, product, }) => {
+        if (cart) {
+            return {
+                ...event,
+                ecommerce: {
+                    ...event.ecommerce,
+                    currency: event.ecommerce?.currency ?? cart.currencySymbol,
+                    customer: event.ecommerce?.customer ?? customerNumber,
+                    items: cart.cartLines?.map(cartLine => ({
+                        item_id: cartLine.erpNumber,
+                        item_name: cartLine.shortDescription,
+                        price: cartLine.pricing?.unitNetPrice,
+                        quantity: cartLine.qtyOrdered ?? 0,
+                    })) ?? [],
+                },
+                value: event.value ?? cart.orderSubTotal ?? 0, // TODO: Why not grandTotal?
+            };
+        }
+        else if (product) {
+            return {
+                ...event,
+                ecommerce: {
+                    ...event.ecommerce,
+                    currency: event.ecommerce?.currency ??
+                        currencySymbolToISO[product.unitListPriceDisplay[0] || ''],
+                    customer: event.ecommerce?.customer ?? customerNumber,
+                    items: [
+                        {
+                            item_id: product.productNumber,
+                            item_name: product.productTitle,
+                            price: product.price || product.unitListPrice,
+                        },
+                    ],
+                },
+                value: 0,
+            };
+        }
+        else if (cartLine) {
+            return {
+                ...event,
+                ecommerce: {
+                    ...event.ecommerce,
+                    currency: event.ecommerce?.currency ??
+                        currencySymbolToISO[cartLine.pricing?.actualPriceDisplay[0] || ''],
+                    customer: event.ecommerce?.customer ?? customerNumber,
+                    items: [
+                        {
+                            item_id: cartLine.erpNumber,
+                            item_name: cartLine.productName,
+                            price: cartLine.pricing?.actualPrice,
+                            quantity: cartLine.qtyOrdered ?? undefined,
+                        },
+                    ],
+                },
+                value: cartLine.pricing?.actualPrice,
+            };
+        }
+        else {
+            return event;
+        }
+    }, [customerNumber]);
+    useEffect(() => {
+        if (!eventOrArgs)
+            return;
+        if (isGAEvent(eventOrArgs)) {
+            dataLayer.push(eventOrArgs);
+        }
+        else if ('cart' in eventOrArgs) {
+            dataLayer.push(createEcommerceEvent(eventOrArgs));
+        }
+        else if ('product' in eventOrArgs) {
+            dataLayer.push(createEcommerceEvent(eventOrArgs));
+        }
+        else if ('cartLine' in eventOrArgs) {
+            dataLayer.push(createEcommerceEvent(eventOrArgs));
+        }
+    }, [eventOrArgs, createEcommerceEvent]);
+    return { createEcommerceEvent, dataLayer };
+}
+
+export { useDataLayer };

package/dist/shared/model/currency.d.ts

@@ -1,4 +1,5 @@
 export declare const currencySymbolToISO: {
+    readonly '': "EUR";
     readonly $: "USD";
     readonly 'Bs.': "VES";
     readonly Ft: "HUF";

package/dist/shared/model/currency.js

@@ -1,4 +1,5 @@
 const currencySymbolToISO = {
+    '': 'EUR', // Euro
     $: 'USD', // US Dollar
     'Bs.': 'VES', // Venezuelan Bolívar Soberano
     Ft: 'HUF', // Hungarian Forint

package/dist/styles.css

@@ -629,6 +629,64 @@
   margin-right: -16px;
 }
 
+.progress-circle-module-4nweP {
+  --width: var(--space-24);
+
+  position: relative;
+  display: block;
+  width: var(--width);
+  height: var(--width);
+  border: 4px solid transparent;
+  border-radius: var(--width);
+  animation: progress-circle-module-kCf7K 0.6s infinite linear;
+  -webkit-mask:
+    linear-gradient(#000 0 0) padding-box,
+    linear-gradient(#000 0 0);
+          mask:
+    linear-gradient(#000 0 0) padding-box,
+    linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+          mask-composite: exclude;
+}
+
+  .progress-circle-module-4nweP:where(.progress-circle-module-SHNFy) {
+    background: conic-gradient(
+        from 0.5turn,
+        var(--color-white),
+        rgb(0 0 0 / 0%) 0.08turn,
+        rgb(0 0 0 / 0%) 0.17turn,
+        var(--color-white) 0.5turn,
+        var(--color-white)
+      )
+      border-box;
+  }
+
+  .progress-circle-module-4nweP:where(.progress-circle-module-TRZWO) {
+    background: conic-gradient(
+        from 0.5turn,
+        var(--color-black),
+        var(--color-brand-light-gray) 0.08turn,
+        var(--color-brand-light-gray) 0.17turn,
+        var(--color-black) 0.5turn,
+        var(--color-black)
+      )
+      border-box;
+  }
+
+  .progress-circle-module-4nweP:where(.progress-circle-module--Gspu) {
+    --width: var(--space-20);
+  }
+
+  .progress-circle-module-4nweP:where(.progress-circle-module-4tRZd) {
+    --width: var(--space-24);
+  }
+
+@keyframes progress-circle-module-kCf7K {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 .button-module-V4meK {
   all: unset;
   display: inline-flex;
@@ -660,6 +718,48 @@
     height: 24px;
   }
 
+  .button-module-V4meK.button-module-LwuW2,
+  .button-module-V4meK.button-module-U5IxM {
+    cursor: default;
+    pointer-events: none;
+  }
+
+  .button-module-V4meK.button-module-LwuW2 > :not(.button-module-13ndF) {
+      visibility: hidden;
+    }
+
+  .button-module-V4meK.button-module-LwuW2 .button-module-13ndF {
+      position: absolute;
+      margin: auto;
+      inset: 0;
+    }
+
+  .button-module-V4meK.button-module-U5IxM {
+    position: relative;
+    display: inline-grid;
+    padding-right: var(--space-48);
+    gap: var(--space-12);
+  }
+
+  .button-module-V4meK.button-module-U5IxM .button-module-vqRq- {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+  .button-module-V4meK.button-module-U5IxM .button-module-13ndF {
+      position: absolute;
+      right: var(--space-8);
+    }
+
+  .button-module-V4meK.button-module-U5IxM:where(.button-module-tmyk8) {
+      color: color-mix(in srgb, var(--color-white) 40%, transparent 60%);
+    }
+
+  .button-module-V4meK.button-module-U5IxM:where(.button-module--1bCH) {
+      color: var(--color-brand-medium-gray);
+    }
+
 /*********************************************************
  *
  *  Sizes
@@ -726,11 +826,11 @@
     transform: translateY(-1px);
   }
 
-.button-module-tmyk8:where([data-disabled]) {
-    border-color: var(--color-brand-light-gray);
-    background-color: var(--color-red-100);
-    color: var(--color-red-50);
-  }
+.button-module-tmyk8:where([data-disabled]):where(:not(.button-module-U5IxM, .button-module-LwuW2)) {
+      border-color: var(--color-brand-light-gray);
+      background-color: var(--color-red-100);
+      color: var(--color-red-50);
+    }
 
 .button-module--1bCH:where(.button-module-vq9GI, .button-module-AjvlY) {
     background-color: var(--color-brand-white);
@@ -959,7 +1059,7 @@
   position: relative;
   display: inline-block;
   overflow: hidden;
-  border: none;
+  border: 1px solid transparent;
   border-radius: var(--border-radius-8);
   background-color: var(--color-brand-light-gray);
 }
@@ -1005,16 +1105,19 @@
     box-shadow: var(--shadow-focus-outline);
     outline: 0;
   }
-.input-module-2woJR:has([data-invalid])::after {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    display: block;
-    height: 2px;
-    background-color: var(--color-brand-red);
-    content: '';
+.input-module-2woJR:has([data-invalid]) {
+    border-bottom-color: var(--color-brand-red);
   }
+.input-module-2woJR:has([data-invalid])::after {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      display: block;
+      height: 1px;
+      background-color: var(--color-brand-red);
+      content: '';
+    }
 .input-module-2woJR .input-module-6HwY4 {
   display: inline-grid;
 }
@@ -1168,6 +1271,7 @@
     all: unset;
     position: relative;
     display: flex;
+    overflow: hidden;
     width: 100%;
     height: var(--height);
     box-sizing: border-box;
@@ -1207,7 +1311,24 @@
       opacity: 0.4;
     }
 
-  .select-module-ui-Wc.select-module-IRd4F .select-module-aMQIQ {
+  .select-module-ui-Wc[data-invalid] .select-module-aMQIQ {
+    border-bottom-color: var(--color-brand-red);
+  }
+
+  .select-module-ui-Wc[data-invalid] .select-module-aMQIQ::after {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      display: block;
+      height: 1px;
+      background-color: var(--color-brand-red);
+      content: '';
+    }
+
+  /* stylelint-disable-next-line no-descending-specificity */
+
+  .select-module-ui-Wc:where(.select-module-IRd4F) .select-module-aMQIQ {
     border-color: var(--color-brand-light-gray);
     background-color: var(--color-brand-light-gray);
   }
@@ -2345,20 +2466,6 @@
   }
 }
 
-.progress-circle-module-4nweP {
-  --width: var(--space-24);
-
-  width: var(--width);
-  height: var(--width);
-  animation: progress-circle-module-kCf7K 0.6s infinite linear;
-}
-
-@keyframes progress-circle-module-kCf7K {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
 .product-overview-grid-module-bzys- {
   --amount-of-columns: 1;
   --column-gap: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonic-equipment/ui",
-  "version": "123.0.0",
+  "version": "124.0.0",
   "type": "module",
   "license": "MIT",
   "engines": {