@sonic-equipment/ui 151.0.0 → 153.0.0

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

@@ -32,7 +32,7 @@ function InternalAddToCartButton({ initialState = 'initial', isDisabled = false,
         _onChange(quantity);
         setQuantity(quantity);
     }, [_onChange]);
-    return (jsxs("div", { "data-test-selector": "addToCartButton", children: [currentState === 'initial' && (jsx(InitialState, { isDisabled: isDisabled, onAddToCart: () => onChange(1) })), currentState === 'spinner' && (jsx(SpinnerState, { isDisabled: isDisabled, onChange: onChange, onManualInput: value => {
+    return (jsxs("div", { className: styles['add-to-cart-button'], "data-test-selector": "addToCartButton", children: [currentState === 'initial' && (jsx(InitialState, { isDisabled: isDisabled, onAddToCart: () => onChange(1) })), currentState === 'spinner' && (jsx(SpinnerState, { isDisabled: isDisabled, onChange: onChange, onManualInput: value => {
                     setManualInputQuantity(value);
                     setState('manual-input');
                 }, quantity: quantity }, quantity)), currentState === 'manual-input' && (jsx(ManualInputState, { isDisabled: isDisabled, onCancel: () => setState('spinner'), onConfirm: onChange, quantity: manualInputQuantity || '' }))] }));
@@ -78,18 +78,18 @@ function ManualInputState({ isDisabled, onCancel, onConfirm, quantity, }) {
     const [updatedQuantity, setQuantity] = useState(quantity);
     const onKeyUp = (e) => {
         if (e.key === 'Enter')
-            onConfirm(ensureNumber(updatedQuantity));
+            onConfirm(ensureNumber(updatedQuantity, 0));
         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, "data-test-selector": "quantity", 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, 0) : undefined, formatOptions: {
                     maximumFractionDigits: 0,
                     style: 'decimal',
                     useGrouping: false,
                 }, isDisabled: isDisabled, label: "Quantity", maxLength: 4, maxValue: 9999, minValue: 0, name: "quantity", onChange: value => setQuantity(String(value)), onKeyUp: onKeyUp, showLabel: false, size: "md" }), jsx(Button, { condensed: true, "data-test-selector": "confirm", isDisabled: isDisabled, onClick: e => {
                     e.preventDefault();
                     e.stopPropagation();
-                    onConfirm(ensureNumber(updatedQuantity));
+                    onConfirm(ensureNumber(updatedQuantity, 0));
                 }, size: "md", children: "OK" })] }));
 }
 

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

@@ -1,3 +1,3 @@
-var styles = {"manual-input-container":"add-to-cart-button-module-AWFvQ","left-button-spacer":"add-to-cart-button-module-SS7WM"};
+var styles = {"add-to-cart-button":"add-to-cart-button-module-GdrDp","manual-input-container":"add-to-cart-button-module-AWFvQ","left-button-spacer":"add-to-cart-button-module-SS7WM"};
 
 export { styles as default };

package/dist/cards/orderline-card/orderline-card.js

@@ -12,7 +12,7 @@ import styles from './orderline-card.module.css.js';
 
 function OrderLineCard(props) {
     const { deliveryDate, href, image, isReadonly, price, productId, sku, tags, title, } = props;
-    return (jsxs(RouteLink, { className: clsx(styles['orderline-card'], isReadonly && styles.readonly), href: href, id: productId, isDisabled: isReadonly, children: [jsx("div", { className: styles['image-container'], role: "presentation", children: jsx(Image, { ...image }) }), jsx(Heading, { className: styles.title, size: "xxxs", tag: "h3", children: title }), tags && tags.length > 0 && (jsx("div", { className: styles.tags, children: tags.map(tag => (jsx(Tag, { children: jsx(FormattedMessage, { fallbackValue: tag, id: `tag.${tag.toLowerCase()}` }) }, tag))) })), jsx(ProductSku, { className: styles.sku, sku: sku }), isReadonly ? (jsx("p", { className: styles.amount, children: jsx(FormattedMessage, { id: "Amount: {0}", replacementValues: { '0': props.quantity.toString() } }) })) : (jsx("div", { className: styles['add-to-cart-button'], children: props.addToCartButton })), jsx(Price, { className: styles.price, currencyCode: price.currencyCode, originalPrice: price.originalTotalPrice, price: price.totalPrice, pricePerUnit: price.pricePerUnit, variant: "sonic" }), deliveryDate && (jsx(DeliveryTime, { className: styles.delivery, deliveryDate: deliveryDate })), !isReadonly && jsx("div", { className: styles.remove, children: props.removeButton })] }));
+    return (jsxs(RouteLink, { className: clsx(styles['orderline-card'], isReadonly && styles.readonly), href: href, id: productId, isDisabled: isReadonly, children: [jsx("div", { className: styles['image-container'], role: "presentation", children: jsx(Image, { ...image, fit: "contain" }) }), jsx(Heading, { className: styles.title, size: "xxxs", tag: "h3", children: title }), tags && tags.length > 0 && (jsx("div", { className: styles.tags, children: tags.map(tag => (jsx(Tag, { children: jsx(FormattedMessage, { fallbackValue: tag, id: `tag.${tag.toLowerCase()}` }) }, tag))) })), jsx(ProductSku, { className: styles.sku, sku: sku }), isReadonly ? (jsx("p", { className: styles.amount, children: jsx(FormattedMessage, { id: "Amount: {0}", replacementValues: { '0': props.quantity.toString() } }) })) : (jsx("div", { className: styles['add-to-cart-button'], children: props.addToCartButton })), jsx(Price, { className: styles.price, currencyCode: price.currencyCode, originalPrice: price.originalTotalPrice, price: price.totalPrice, pricePerUnit: price.pricePerUnit, variant: "sonic" }), deliveryDate && (jsx(DeliveryTime, { className: styles.delivery, deliveryDate: deliveryDate })), !isReadonly && jsx("div", { className: styles.remove, children: props.removeButton })] }));
 }
 
 export { OrderLineCard };

package/dist/cards/product-card/product-card.js

@@ -10,7 +10,7 @@ import { Heading } from '../../typography/heading/heading.js';
 import styles from './product-card.module.css.js';
 
 function ProductCard({ addToCartButton: AddToCartButton, favoriteButton: FavoriteButton, href, id, image, onClick, price, sku, tags, title, }) {
-    return (jsx("div", { className: styles['product-card-container'], children: jsxs(RouteLink, { className: styles['product-card'], "data-product-id": sku, href: href, id: id, onClick: onClick, children: [jsx("div", { className: styles['image-container'], children: jsx(Image, { ...image }) }), jsx("div", { className: styles['favorite-button'], children: FavoriteButton && FavoriteButton }), tags && tags.length > 0 && (jsx("div", { className: styles.tags, children: tags.map(tag => (jsx(Tag, { children: jsx(FormattedMessage, { fallbackValue: tag, id: `tag.${tag.toLowerCase()}` }) }, tag))) })), jsx(Heading, { className: styles.title, size: "xxxs", tag: "h2", children: title }), jsx(ProductSku, { className: styles.sku, sku: sku }), jsx(Price, { className: styles.price, currencyCode: price.currencyCode, isVatIncluded: price.isVatIncluded, originalPrice: price.originalPrice, price: price.price, variant: "sonic" }), jsx("div", { className: styles['add-to-cart-button'], children: AddToCartButton })] }) }));
+    return (jsx("div", { className: styles['product-card-container'], children: jsxs(RouteLink, { className: styles['product-card'], "data-product-id": sku, href: href, id: id, onClick: onClick, children: [jsx("div", { className: styles['image-container'], children: jsx(Image, { ...image, fit: "contain" }) }), jsx("div", { className: styles['favorite-button'], children: FavoriteButton && FavoriteButton }), tags && tags.length > 0 && (jsx("div", { className: styles.tags, children: tags.map(tag => (jsx(Tag, { children: jsx(FormattedMessage, { fallbackValue: tag, id: `tag.${tag.toLowerCase()}` }) }, tag))) })), jsx(Heading, { className: styles.title, size: "xxxs", tag: "h2", children: title }), jsx(ProductSku, { className: styles.sku, sku: sku }), jsx(Price, { className: styles.price, currencyCode: price.currencyCode, isVatIncluded: price.isVatIncluded, originalPrice: price.originalPrice, price: price.price, variant: "sonic" }), jsx("div", { className: styles['add-to-cart-button'], children: AddToCartButton })] }) }));
 }
 
 export { ProductCard };

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

@@ -18,6 +18,7 @@ import { useToast } from '../../../toast/use-toast.js';
 import { useFetchCurrentCartLinesWithAtp } from '../../../shared/api/storefront/hooks/cart/use-fetch-current-cart-lines-with-atp.js';
 import { useFetchCurrentCartWithAtp } from '../../../shared/api/storefront/hooks/cart/use-fetch-current-cart-with-atp.js';
 import { getCurrencyCodeBySymbol } from '../../../shared/model/currency.js';
+import { ensureNumber } from '../../../shared/utils/number.js';
 import { PATHS } from '../../paths.js';
 import { EmptyCart } from './components/empty-cart-page.js';
 
@@ -96,7 +97,7 @@ function CartContent({ cartLines }) {
                     title: cartLine.altText,
                 }, isReadonly: false, onRemove: () => deleteCartLine.mutate({ cartLineId: cartLine.id }), orderLineId: cartLine.id, price: {
                     currencyCode,
-                    originalTotalPrice: cartLine.pricing?.extendedUnitNetPrice || 0,
+                    originalTotalPrice: ensureNumber(cartLine.properties.totalListPrice),
                     pricePerUnit: cartLine.pricing?.unitNetPrice || 0,
                     totalPrice: cartLine.pricing?.extendedUnitNetPrice || 0,
                 }, productId: cartLine.productId || '', sku: cartLine.erpNumber || '', tags: [], title: cartLine.productName }, cartLine.id))) }) }));

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

@@ -11,6 +11,7 @@ import { useSaveCartForLater } from '../../../shared/api/storefront/hooks/cart/u
 import { getCurrencyCodeBySymbol } from '../../../shared/model/currency.js';
 import { RouteButton } from '../../../shared/routing/route-button.js';
 import { formatDateToLocaleString } from '../../../shared/utils/date.js';
+import { ensureNumber } from '../../../shared/utils/number.js';
 import { useToast } from '../../../toast/use-toast.js';
 import { Page } from '../../components/page/page.js';
 import { PATHS } from '../../paths.js';
@@ -85,7 +86,7 @@ function OrderConfirmationPageContent({ cart, }) {
                                         title: cartLine.altText,
                                     }, isReadonly: true, price: {
                                         currencyCode,
-                                        originalTotalPrice: cartLine.pricing?.extendedUnitNetPrice || 0,
+                                        originalTotalPrice: ensureNumber(cartLine.properties.totalListPrice),
                                         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))) }) }) })] }) }) }));

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

@@ -7,6 +7,7 @@ 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 { getCurrencyCodeBySymbol } from '../../../shared/model/currency.js';
+import { ensureNumber } from '../../../shared/utils/number.js';
 import { Page } from '../../components/page/page.js';
 import { PATHS } from '../../paths.js';
 import { CheckoutPageLayout } from '../layouts/checkout-page-layout/checkout-page-layout.js';
@@ -39,7 +40,7 @@ function PaymentPageContent({ atp, cart, formId, hasAtp, isProcessing, isValidat
                                     title: cartLine.altText,
                                 }, isReadonly: true, price: {
                                     currencyCode,
-                                    originalTotalPrice: cartLine.pricing?.extendedUnitNetPrice || 0,
+                                    originalTotalPrice: ensureNumber(cartLine.properties.totalListPrice),
                                     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))) }) }) })] }) }));

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

@@ -861,6 +861,10 @@ export interface CartLineModel extends BaseModel {
     productName: string;
     productSubscription: ProductSubscriptionDto | null;
     productUri: string;
+    properties: {
+        [key: string]: string;
+        totalListPrice: string;
+    };
     qtyLeft: number;
     qtyOnHand: number;
     qtyOrdered: number | null;

package/dist/shared/data/cart.data.js

@@ -257,7 +257,7 @@ const cart = {
                 subscriptionTotalCycles: 0,
             },
             productUri: '/Product/4311165-High-leverage-combination-pliers-6',
-            properties: {},
+            properties: { totalListPrice: '30.32' },
             qtyLeft: 0,
             qtyOnHand: 0,
             qtyOrdered: 1,

package/dist/shared/model/hit.js

@@ -1,3 +1,5 @@
+import { ensureNumber } from '../utils/number.js';
+
 function transformAlgoliaPromoHitToPromoHit(algoliaPromoHit) {
     return {
         hit: algoliaPromoHit,
@@ -27,9 +29,7 @@ function transformAlgoliaProductHitToProductHit(algoliaProductHit) {
         name: algoliaProductHit.name,
         objectId: algoliaProductHit.objectID,
         originalPrice: algoliaProductHit.originalPrice,
-        position: Number.isNaN(Number.parseFloat(String(algoliaProductHit.__position)))
-            ? 0
-            : Number.parseFloat(String(algoliaProductHit.__position)),
+        position: ensureNumber(String(algoliaProductHit.__position), 0),
         price: algoliaProductHit.price,
         queryId: algoliaProductHit.__autocomplete_queryID === undefined
             ? undefined

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

@@ -1 +1,2 @@
-export declare const ensureNumber: (value: unknown, defaultNumber?: number) => number;
+export declare function ensureNumber(value: unknown, defaultNumber: number): number;
+export declare function ensureNumber(value: unknown): number | undefined;

package/dist/shared/utils/number.js

@@ -1,10 +1,10 @@
-const ensureNumber = (value, defaultNumber = 0) => {
+function ensureNumber(value, defaultNumber) {
     if (typeof value === 'number')
         return value;
     if (typeof value !== 'string')
         return defaultNumber;
     const numberValue = Number.parseFloat(value);
     return Number.isNaN(numberValue) ? defaultNumber : numberValue;
-};
+}
 
 export { ensureNumber };

package/dist/styles.css

@@ -1710,6 +1710,10 @@
         }
   }
 
+.add-to-cart-button-module-GdrDp {
+  display: flex;
+}
+
 .add-to-cart-button-module-AWFvQ {
   display: inline-flex;
   flex-direction: row;
@@ -2896,7 +2900,7 @@
   }
 
   .orderline-card-module-AMTMm .orderline-card-module-TlhUg {
-    display: grid;
+    display: flex;
     aspect-ratio: 1;
     block-size: 100%;
     grid-area: image;
@@ -2933,12 +2937,10 @@
 
   @container (inline-size >= 576px) {.orderline-card-module-AMTMm {
     padding: 32px 64px 32px 0;
-    grid-template:
-      repeat(3, minmax(0, min-content)) minmax(8px, 1fr) repeat(
+    grid-template: repeat(3, minmax(0, min-content)) minmax(8px, 1fr) repeat(
         2,
         minmax(0, min-content)
-      )
-      / 143px 1fr auto;
+      ) / 143px 1fr auto;
     grid-template-areas:
       'image tags tags'
       'image title title'
@@ -3000,8 +3002,7 @@
       var(--space-8),
       1fr
     )
-    repeat(2, minmax(0, min-content))
-    / 1fr;
+    repeat(2, minmax(0, min-content)) / 1fr;
   grid-template-areas:
     'image'
     '.'
@@ -3070,7 +3071,6 @@
   }
 
 .product-card-module-pLaiB .product-card-module-irW0D {
-    overflow: hidden;
     grid-area: price;
     margin-block-end: var(--space-8);
     place-self: flex-end flex-end;
@@ -3093,13 +3093,10 @@
 .product-card-module-pLaiB {
     --box-shadow: var(--box-shadow-heavy);
 
-    grid-template:
-      204px var(--space-8) repeat(3, minmax(0, min-content)) minmax(
+    grid-template: 204px var(--space-8) repeat(3, minmax(0, min-content)) minmax(
         var(--space-16),
         1fr
-      )
-      minmax(0, min-content)
-      / 1fr auto;
+      ) minmax(0, min-content) / 1fr minmax(0, min-content);
     grid-template-areas:
       'image image'
       '. .'
@@ -3946,9 +3943,7 @@
 
   @media (width >= 768px) {
     .usp-carousel-module-UCbpX .usp-carousel-module-msaeJ {
-      left: calc(
-        ((100% - var(--image-max-width)) / 2) + var(--image-max-width)
-      );
+      left: calc((100% - var(--image-max-width)) / 2 + var(--image-max-width));
     }
   }
 

package/package.json

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