@sonic-equipment/ui 0.0.112 → 0.0.113

package/dist/index.d.ts

@@ -128,7 +128,7 @@ declare const request: Request;
 
 declare const features: {
     readonly language: "language";
-    readonly pdpv1: "pdpV1";
+    readonly pdp: "pdpV2";
     readonly plpv1: "plpV1";
     readonly searchv1: "searchV1";
 };
@@ -3827,17 +3827,22 @@ type TranslationId$1 =
   | "Unfortnately, We found no articles for your search '{0}'"
   | ' to your account to manage your lists.'
   | 'Add to list'
+  | 'Amount: {0}'
   | '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?'
   | 'Cancel'
   | 'Chosen filters'
   | 'Clear filters'
   | 'Clear'
+  | 'Continue'
   | 'Continue shopping'
   | 'Cost overview'
   | 'Country'
   | 'Create new list'
   | 'create account'
+  | 'Delivery expected in {0} {1}'
   | 'Double check your spelling'
   | 'Downloads'
   | 'Excl. VAT'
@@ -3852,14 +3857,17 @@ type TranslationId$1 =
   | 'List name already exists'
   | 'New list name'
   | 'Order number'
+  | 'pc'
   | 'Please Sign In'
   | 'Popular searches'
   | 'Print'
   | 'Product Features'
   | 'Products'
+  | 'Product'
   | 'Quick access'
   | 'Recent searches'
   | 'Recently viewed'
+  | 'Remove all'
   | 'Searching again using more general terms'
   | 'See all results'
   | 'Select a list'
@@ -3979,7 +3987,7 @@ interface UpdateCartLineParams {
 }
 declare function useUpdateCartLineById(): _tanstack_react_query.UseMutationResult<void, Error, UpdateCartLineParams, unknown>;
 
-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 to list' | 'An unexpected error occured' | 'Are you looking for information about our service? Please visit our customer support page' | 'Cancel' | 'Chosen filters' | 'Clear filters' | 'Clear' | 'Continue shopping' | 'Cost overview' | 'Country' | 'Create new list' | 'create account' | 'Double check your spelling' | 'Downloads' | 'Excl. VAT' | 'Explore by categories' | 'Exploring our products by category' | 'Features' | 'Fulfillment method' | 'Hide filters' | 'Incl. VAT' | 'Includes' | 'Language' | 'List name already exists' | 'New list name' | 'Order number' | 'Please Sign In' | 'Popular searches' | 'Print' | 'Product Features' | 'Products' | 'Quick access' | 'Recent searches' | 'Recently viewed' | 'Searching again using more general terms' | 'See all results' | 'Select a list' | 'Shop more efficiently and quicker with a favorites list' | 'Easily add your favorite products' | 'Your favorites are available on multiple devices' | 'Save' | 'Share your favorite list with others' | 'Shipping and handling' | 'Show all' | 'Show filters' | 'Show less' | 'Show' | 'Sorry, there are no products found' | 'Sorry, we could not find matches for' | 'Sort by' | 'Specifications' | 'Submit' | 'Subtotal' | 'Suggestions' | 'The product has been added to your cart.' | 'The product has been updated in your cart.' | 'The product has been removed from your cart.' | 'Unable to add the product to your cart.' | 'Unable to update the product in your cart.' | 'Unable to remove the product from your cart.' | 'Try another search' | 'Total' | 'Use fewer keywords' | '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 ' | 'article' | 'articles' | 'facet.categories' | 'facet.height' | 'facet.weight' | 'of' | 'sign in' | 'sort.newest' | 'sort.price_asc' | 'sort.price_desc' | 'sort.relevance' | 'tag.limited' | 'tag.new';
+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 to list' | 'Amount: {0}' | '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?' | 'Cancel' | 'Chosen filters' | 'Clear filters' | 'Clear' | 'Continue' | 'Continue shopping' | 'Cost overview' | 'Country' | 'Create new list' | 'create account' | 'Delivery expected in {0} {1}' | 'Double check your spelling' | 'Downloads' | 'Excl. VAT' | 'Explore by categories' | 'Exploring our products by category' | 'Features' | 'Fulfillment method' | 'Hide filters' | 'Incl. VAT' | 'Includes' | 'Language' | 'List name already exists' | 'New list name' | 'Order number' | 'pc' | 'Please Sign In' | 'Popular searches' | 'Print' | 'Product Features' | 'Products' | 'Product' | 'Quick access' | 'Recent searches' | 'Recently viewed' | 'Remove all' | 'Searching again using more general terms' | 'See all results' | 'Select a list' | 'Shop more efficiently and quicker with a favorites list' | 'Easily add your favorite products' | 'Your favorites are available on multiple devices' | 'Save' | 'Share your favorite list with others' | 'Shipping and handling' | 'Show all' | 'Show filters' | 'Show less' | 'Show' | 'Sorry, there are no products found' | 'Sorry, we could not find matches for' | 'Sort by' | 'Specifications' | 'Submit' | 'Subtotal' | 'Suggestions' | 'The product has been added to your cart.' | 'The product has been updated in your cart.' | 'The product has been removed from your cart.' | 'Unable to add the product to your cart.' | 'Unable to update the product in your cart.' | 'Unable to remove the product from your cart.' | 'Try another search' | 'Total' | 'Use fewer keywords' | '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 ' | 'article' | 'articles' | 'facet.categories' | 'facet.height' | 'facet.weight' | 'of' | 'sign in' | 'sort.newest' | 'sort.price_asc' | 'sort.price_desc' | 'sort.relevance' | 'tag.limited' | 'tag.new';
 
 type Translations = Record<TranslationId, string>;
 type FormatMessageFunction = (id: string, ...replacementValues: readonly string[]) => string | undefined;
@@ -4479,9 +4487,10 @@ declare function CountrySelector({ defaultCountryCode, defaultLanguageCode, onCh
 
 interface ProductPriceProps {
     className?: string;
-    isVatIncluded: boolean;
+    isVatIncluded: boolean | null;
     originalPrice: number;
     price: number;
+    pricePerUnit?: number;
 }
 declare function ProductPrice({ className, isVatIncluded, originalPrice, price, }: ProductPriceProps): react_jsx_runtime.JSX.Element | undefined;
 
@@ -4624,11 +4633,17 @@ interface IntlProviderProps {
 }
 declare function IntlProvider({ children, formatMessage, languageCode: _languageCode, }: IntlProviderProps): react_jsx_runtime.JSX.Element;
 
-type FormattedMessageFunction = (id: TranslationId, options?: {
-    fallbackValue?: string;
-    optional?: boolean;
-    replacementValues?: Record<string, string>;
-}) => string;
+interface FormattedMessageFunction {
+    (id: TranslationId, options?: {
+        fallbackValue?: string;
+        optional?: boolean;
+        replacementValues?: Record<string, string>;
+    }): string;
+    pluralize: {
+        (translationId: string, count: number): string;
+        (translationIdPrefix: string, translationId: string, count: number): string;
+    };
+}
 declare function useFormattedMessage(): FormattedMessageFunction;
 
 interface ProductOverviewGridProps {

package/dist/index.js

@@ -483,7 +483,7 @@ const request = (function createRequestFunction() {
 
 const features = {
     language: 'language',
-    pdpv1: 'pdpV1',
+    pdp: 'pdpV2',
     plpv1: 'plpV1',
     searchv1: 'searchV1',
 };
@@ -1347,9 +1347,9 @@ function Button({ _pseudo = 'none', children, className, color = 'primary', cond
     const onClick = (e) => {
         if (_onClick)
             _onClick(e);
+        e.stopPropagation();
         if (type === 'submit')
             return;
-        e.stopPropagation();
         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, 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 })] }));
@@ -1671,7 +1671,7 @@ const IntlContext = createContext({
 
 function useFormattedMessage() {
     const { formatMessage } = useContext(IntlContext);
-    return (id, { fallbackValue, optional, replacementValues } = {}) => {
+    const formatFunction = (id, { fallbackValue, optional, replacementValues } = {}) => {
         const message = formatMessage(id, 
         /* The following code converts replacementValues from an object to an array.
          * This is to keep the external API compatible with react-intls version
@@ -1692,6 +1692,13 @@ function useFormattedMessage() {
             console.warn(`Missing translation with id: ${id}`);
         return message || fallbackValue || id;
     };
+    function pluralize(translationIdOrPrefix, translationIdOrCount, count) {
+        return formatFunction((typeof translationIdOrCount === 'number'
+            ? `${translationIdOrPrefix}.${translationIdOrCount === 1 ? 'singular' : 'plural'}`
+            : `${translationIdOrPrefix}.${translationIdOrCount}.${count === 1 ? 'singular' : 'plural'}`));
+    }
+    formatFunction.pluralize = pluralize;
+    return formatFunction;
 }
 
 const FormattedMessage = ({ fallbackValue, id, optional, replacementValues, }) => useFormattedMessage()(id, { fallbackValue, optional, replacementValues });
@@ -1849,9 +1856,9 @@ const formatPrice = (price) => new Intl.NumberFormat('en-US', {
     minimumFractionDigits: 2,
 }).format(price);
 
-var styles$Y = {"product-price":"product-price-module-oIU1K","original-price":"product-price-module-til0s","is-hidden":"product-price-module-V1NCf","current-price-wrapper":"product-price-module-FfVhl","current-price":"product-price-module-pvy2w","wholes":"product-price-module-GCw07","dot":"product-price-module-N56iV","decimals":"product-price-module-eWOOF","vat":"product-price-module-96DoG"};
+var styles$Y = {"product-price":"product-price-module-oIU1K","original-price":"product-price-module-til0s","is-hidden":"product-price-module-V1NCf","current-price-wrapper":"product-price-module-FfVhl","current-price":"product-price-module-pvy2w","wholes":"product-price-module-GCw07","dot":"product-price-module-N56iV","decimals":"product-price-module-eWOOF","price-per-unit":"product-price-module-syhum","vat":"product-price-module-96DoG"};
 
-function ProductPrice({ className, isVatIncluded, originalPrice, price, }) {
+function ProductPrice({ className, isVatIncluded = false, originalPrice, price, }) {
     if (isNaN(price))
         return;
     const originalPriceWithCurrency = formatPrice(!isNaN(originalPrice) ? originalPrice : price);
@@ -1860,7 +1867,7 @@ function ProductPrice({ className, isVatIncluded, originalPrice, price, }) {
     const showOriginalPrice = priceWithCurrency !== originalPriceWithCurrency;
     return (jsxs("div", { className: clsx(className, styles$Y['product-price']), children: [jsx("span", { className: clsx(styles$Y['original-price'], {
                     [styles$Y['is-hidden']]: !showOriginalPrice,
-                }), children: originalPriceWithCurrency }), jsxs("div", { className: styles$Y['current-price-wrapper'], children: [jsxs("div", { className: styles$Y['current-price'], children: [jsx("span", { className: styles$Y.wholes, children: wholes }), jsx("span", { className: styles$Y.dot, children: "." }), jsx("span", { className: styles$Y.decimals, children: decimals })] }), jsx("span", { className: styles$Y.vat, children: isVatIncluded ? (jsx(FormattedMessage, { id: "Incl. VAT" })) : (jsx(FormattedMessage, { id: "Excl. VAT" })) })] })] }));
+                }), children: originalPriceWithCurrency }), jsxs("div", { className: styles$Y['current-price-wrapper'], children: [jsxs("div", { className: styles$Y['current-price'], children: [jsx("span", { className: styles$Y.wholes, children: wholes }), jsx("span", { className: styles$Y.dot, children: "." }), jsx("span", { className: styles$Y.decimals, children: decimals })] }), isVatIncluded !== null && (jsx("span", { className: styles$Y.vat, children: isVatIncluded ? (jsx(FormattedMessage, { id: "Incl. VAT" })) : (jsx(FormattedMessage, { id: "Excl. VAT" })) }))] })] }));
 }
 
 var styles$X = {"product-sku":"product-sku-module-ITb8x"};
@@ -7901,11 +7908,17 @@ function Heading({ bold = true, children, className, italic, size = 'xxl', tag,
 
 var styles$M = {"dialog":"dialog-module-qKzgy","header":"dialog-module-ZnsAe","close":"dialog-module-Y7Tqg","footer":"dialog-module-y7Axm"};
 
-function Footer({ close }) {
-    return (jsxs(Fragment, { children: [jsx(Button, { withArrow: true, color: "primary", size: "md", type: "submit", children: "Submit" }), jsx(Button, { color: "secondary", onClick: close, size: "md", variant: "outline", children: "Close" })] }));
+function Footer({ cancelLabel, close, submitLabel }) {
+    return (jsxs(Fragment, { children: [jsx(Button, { withArrow: true, color: "primary", size: "md", type: "submit", children: jsx(FormattedMessage, { id: submitLabel }) }), jsx(Button, { color: "secondary", onClick: close, size: "md", variant: "outline", children: jsx(FormattedMessage, { id: cancelLabel }) })] }));
 }
-function Dialog({ allowClose = true, children, className, dialogClassName, footer = Footer, hasCloseButton = true, hideTitle, isDismissable, isFullScreen, isKeyboardDismissDisabled, isOpen, onOpenChange, onSubmit, shouldCloseOnInteractOutside, title, validationErrors, }) {
-    return (jsx(Modal, { className: clsx(styles$M['modal-overlay'], className), hasCloseButton: false, isDismissable: isDismissable, isFullScreen: isFullScreen, isKeyboardDismissDisabled: isKeyboardDismissDisabled, isOpen: isOpen, onOpenChange: onOpenChange, shouldCloseOnInteractOutside: shouldCloseOnInteractOutside, children: jsx(Dialog$1, { "aria-label": title, className: clsx(styles$M.dialog, dialogClassName), children: ({ close }) => (jsxs(Form, { className: styles$M.form, onSubmit: onSubmit || (e => e.preventDefault), validationErrors: validationErrors, children: [jsxs("header", { className: styles$M.header, children: [!hideTitle && (jsx(Heading, { className: styles$M.heading, size: "xs", children: title })), hasCloseButton && (jsx("div", { className: styles$M.close, children: jsx(IconButton, { color: "secondary", isDisabled: !allowClose, onClick: close, children: jsx(StrokeCloseboxIcon, {}) }) }))] }), jsx("div", { className: styles$M.content, children: children instanceof Function ? children({ close }) : children }), jsx("footer", { className: styles$M.footer, children: footer instanceof Function ? footer({ close }) : footer })] })) }) }));
+function Dialog({ allowClose = true, cancelLabel = 'Close', children, className, dialogClassName, footer = Footer, hasCloseButton = true, hideTitle, isDismissable, isFullScreen, isKeyboardDismissDisabled, isOpen, onOpenChange, onSubmit, shouldCloseOnInteractOutside, submitLabel = 'Submit', title, validationErrors, }) {
+    return (jsx(Modal, { className: clsx(styles$M['modal-overlay'], className), hasCloseButton: false, isDismissable: isDismissable, isFullScreen: isFullScreen, isKeyboardDismissDisabled: isKeyboardDismissDisabled, isOpen: isOpen, onOpenChange: onOpenChange, shouldCloseOnInteractOutside: shouldCloseOnInteractOutside, children: jsx(Dialog$1, { "aria-label": title, className: clsx(styles$M.dialog, dialogClassName), children: ({ close }) => (jsxs(Form, { className: styles$M.form, onSubmit: e => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    onSubmit?.(e);
+                }, validationErrors: validationErrors, children: [jsxs("header", { className: styles$M.header, children: [!hideTitle && (jsx(Heading, { className: styles$M.heading, size: "xs", children: title })), hasCloseButton && (jsx("div", { className: styles$M.close, children: jsx(IconButton, { color: "secondary", isDisabled: !allowClose, onClick: close, children: jsx(StrokeCloseboxIcon, {}) }) }))] }), jsx("div", { className: styles$M.content, children: children instanceof Function ? children({ close }) : children }), jsx("footer", { className: styles$M.footer, children: footer instanceof Function
+                            ? footer({ cancelLabel, close, submitLabel })
+                            : footer })] })) }) }));
 }
 
 var styles$L = {"country-selector-dialog":"country-selector-dialog-module-mMJS0","content":"country-selector-dialog-module-z-ZqY","logo":"country-selector-dialog-module-7VjsF","intro":"country-selector-dialog-module-IdVDt","selects":"country-selector-dialog-module-Nvikf"};

package/dist/src/cards/orderline-card/connected-orderline-card.d.ts

@@ -0,0 +1,6 @@
+import { OrderLineCardProps } from './orderline-card';
+export interface ConnectedOrderLineProps extends Omit<OrderLineCardProps, 'addToCartButton' | 'favoriteButton'> {
+    onAddToCart?: VoidFunction;
+    onRemove?: (productId: string) => void;
+}
+export declare function ConnectedOrderLineCard({ id, onRemove, ...props }: ConnectedOrderLineProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/cards/orderline-card/connected-remove-button.d.ts

@@ -0,0 +1,5 @@
+export interface ConnectedRemoveButtonProps {
+    onRemove: (productId: string) => void;
+    productId: string;
+}
+export declare function ConnectedRemoveButton({ onRemove: _onRemove, productId, }: ConnectedRemoveButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/cards/orderline-card/orderline-card.d.ts

@@ -0,0 +1,25 @@
+import { ReactElement } from 'react';
+import { ImageSource } from 'shared/model/image';
+import type { ProductTotalPrice as ProductTotalPriceType } from 'shared/model/price';
+export interface BaseOrderLineCardProps {
+    deliveryDate?: Date;
+    href: string;
+    id: string;
+    image: ImageSource;
+    price: ProductTotalPriceType;
+    readonly: boolean;
+    sku: string;
+    tags?: string[];
+    title: string;
+}
+export interface InteractiveOrderLineCardProps extends BaseOrderLineCardProps {
+    addToCartButton: ReactElement;
+    readonly: false;
+    removeButton: ReactElement;
+}
+export interface ReadonlyOrderLineCardProps extends BaseOrderLineCardProps {
+    quantity: number;
+    readonly: true;
+}
+export type OrderLineCardProps = InteractiveOrderLineCardProps | ReadonlyOrderLineCardProps;
+export declare function OrderLineCard(props: OrderLineCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/cards/orderline-card/orderline-card.stories.d.ts

@@ -0,0 +1,46 @@
+import type { StoryObj } from '@storybook/react';
+import { OrderLineCard } from './orderline-card';
+declare const meta: {
+    component: typeof OrderLineCard;
+    decorators: ((Story: import("@storybook/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        addToCartButton: React.ReactElement;
+        readonly: false;
+        removeButton: React.ReactElement;
+        deliveryDate?: Date | undefined;
+        href: string;
+        id: string;
+        image: import("../../shared/model/image").ImageSource;
+        price: import("../../shared/model/price").ProductTotalPrice;
+        sku: string;
+        tags?: string[] | undefined;
+        title: string;
+    } | {
+        quantity: number;
+        readonly: true;
+        deliveryDate?: Date | undefined;
+        href: string;
+        id: string;
+        image: import("../../shared/model/image").ImageSource;
+        price: import("../../shared/model/price").ProductTotalPrice;
+        sku: string;
+        tags?: string[] | undefined;
+        title: string;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof OrderLineCard>;
+export declare const Default: Story;
+export declare const Small: Story;
+export declare const Medium: Story;
+export declare const Large: Story;
+export declare const LongTitle: Story;
+export declare const BigPrice: Story;
+export declare const WithoutTags: Story;
+export declare const ReadOnly: Story;
+export declare const ReadOnlyNoTag: Story;
+export declare const Connected: Story;

package/dist/src/delivery-time/delivery-time.d.ts

@@ -0,0 +1,5 @@
+export interface DeliveryTimeProps {
+    className?: string;
+    deliveryDate: Date;
+}
+export declare function DeliveryTime({ className, deliveryDate }: DeliveryTimeProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/delivery-time/delivery-time.stories.d.ts

@@ -0,0 +1,13 @@
+import type { StoryObj } from '@storybook/react';
+import { DeliveryTime } from './delivery-time';
+declare const meta: {
+    component: typeof DeliveryTime;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/src/display/product-price/product-price.d.ts

@@ -1,7 +1,8 @@
 export interface ProductPriceProps {
     className?: string;
-    isVatIncluded: boolean;
+    isVatIncluded: boolean | null;
     originalPrice: number;
     price: number;
+    pricePerUnit?: number;
 }
 export declare function ProductPrice({ className, isVatIncluded, originalPrice, price, }: ProductPriceProps): import("react/jsx-runtime").JSX.Element | undefined;

package/dist/src/display/product-price/product-total-price.d.ts

@@ -0,0 +1,7 @@
+export interface ProductTotalPriceProps {
+    className?: string;
+    originalTotalPrice: number;
+    pricePerUnit?: number;
+    totalPrice: number;
+}
+export declare function ProductTotalPrice({ className, originalTotalPrice: originalPrice, pricePerUnit, totalPrice, }: ProductTotalPriceProps): import("react/jsx-runtime").JSX.Element | undefined;

package/dist/src/display/product-price/product-total-price.stories.d.ts

@@ -0,0 +1,14 @@
+import type { StoryObj } from '@storybook/react';
+import { ProductTotalPrice } from './product-total-price';
+declare const meta: {
+    component: typeof ProductTotalPrice;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const WithoutOriginalTotalPrice: Story;
+export declare const WithOriginalTotalPrice: Story;

package/dist/src/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 to list' | 'An unexpected error occured' | 'Are you looking for information about our service? Please visit our customer support page' | 'Cancel' | 'Chosen filters' | 'Clear filters' | 'Clear' | 'Continue shopping' | 'Cost overview' | 'Country' | 'Create new list' | 'create account' | 'Double check your spelling' | 'Downloads' | 'Excl. VAT' | 'Explore by categories' | 'Exploring our products by category' | 'Features' | 'Fulfillment method' | 'Hide filters' | 'Incl. VAT' | 'Includes' | 'Language' | 'List name already exists' | 'New list name' | 'Order number' | 'Please Sign In' | 'Popular searches' | 'Print' | 'Product Features' | 'Products' | 'Quick access' | 'Recent searches' | 'Recently viewed' | 'Searching again using more general terms' | 'See all results' | 'Select a list' | 'Shop more efficiently and quicker with a favorites list' | 'Easily add your favorite products' | 'Your favorites are available on multiple devices' | 'Save' | 'Share your favorite list with others' | 'Shipping and handling' | 'Show all' | 'Show filters' | 'Show less' | 'Show' | 'Sorry, there are no products found' | 'Sorry, we could not find matches for' | 'Sort by' | 'Specifications' | 'Submit' | 'Subtotal' | 'Suggestions' | 'The product has been added to your cart.' | 'The product has been updated in your cart.' | 'The product has been removed from your cart.' | 'Unable to add the product to your cart.' | 'Unable to update the product in your cart.' | 'Unable to remove the product from your cart.' | 'Try another search' | 'Total' | 'Use fewer keywords' | '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 ' | 'article' | 'articles' | 'facet.categories' | 'facet.height' | 'facet.weight' | 'of' | 'sign in' | 'sort.newest' | 'sort.price_asc' | 'sort.price_desc' | 'sort.relevance' | 'tag.limited' | 'tag.new';
+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 to list' | 'Amount: {0}' | '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?' | 'Cancel' | 'Chosen filters' | 'Clear filters' | 'Clear' | 'Continue' | 'Continue shopping' | 'Cost overview' | 'Country' | 'Create new list' | 'create account' | 'Delivery expected in {0} {1}' | 'Double check your spelling' | 'Downloads' | 'Excl. VAT' | 'Explore by categories' | 'Exploring our products by category' | 'Features' | 'Fulfillment method' | 'Hide filters' | 'Incl. VAT' | 'Includes' | 'Language' | 'List name already exists' | 'New list name' | 'Order number' | 'pc' | 'Please Sign In' | 'Popular searches' | 'Print' | 'Product Features' | 'Products' | 'Product' | 'Quick access' | 'Recent searches' | 'Recently viewed' | 'Remove all' | 'Searching again using more general terms' | 'See all results' | 'Select a list' | 'Shop more efficiently and quicker with a favorites list' | 'Easily add your favorite products' | 'Your favorites are available on multiple devices' | 'Save' | 'Share your favorite list with others' | 'Shipping and handling' | 'Show all' | 'Show filters' | 'Show less' | 'Show' | 'Sorry, there are no products found' | 'Sorry, we could not find matches for' | 'Sort by' | 'Specifications' | 'Submit' | 'Subtotal' | 'Suggestions' | 'The product has been added to your cart.' | 'The product has been updated in your cart.' | 'The product has been removed from your cart.' | 'Unable to add the product to your cart.' | 'Unable to update the product in your cart.' | 'Unable to remove the product from your cart.' | 'Try another search' | 'Total' | 'Use fewer keywords' | '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 ' | 'article' | 'articles' | 'facet.categories' | 'facet.height' | 'facet.weight' | 'of' | 'sign in' | 'sort.newest' | 'sort.price_asc' | 'sort.price_desc' | 'sort.relevance' | 'tag.limited' | 'tag.new';

package/dist/src/intl/use-format-message.d.ts

@@ -1,7 +1,13 @@
 import { TranslationId } from './translation-id';
-export type FormattedMessageFunction = (id: TranslationId, options?: {
-    fallbackValue?: string;
-    optional?: boolean;
-    replacementValues?: Record<string, string>;
-}) => string;
+export interface FormattedMessageFunction {
+    (id: TranslationId, options?: {
+        fallbackValue?: string;
+        optional?: boolean;
+        replacementValues?: Record<string, string>;
+    }): string;
+    pluralize: {
+        (translationId: string, count: number): string;
+        (translationIdPrefix: string, translationId: string, count: number): string;
+    };
+}
 export declare function useFormattedMessage(): FormattedMessageFunction;

package/dist/src/lists/orderline-list/orderline-list.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+interface OrderLineListProps {
+    children?: ReactNode;
+    onRemoveAll?: () => void;
+}
+export declare function OrderLineList({ children, onRemoveAll }: OrderLineListProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/lists/orderline-list/orderline-list.stories.d.ts

@@ -0,0 +1,15 @@
+import type { StoryObj } from '@storybook/react';
+import { OrderLineList } from './orderline-list';
+declare const meta: {
+    component: typeof OrderLineList;
+    parameters: {
+        layout: string;
+    };
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Small: Story;
+export declare const Medium: Story;
+export declare const Large: Story;
+export declare const Connected: Story;

package/dist/src/modals/confirmation/confirmation-dialog.d.ts

@@ -0,0 +1,10 @@
+interface ConfirmationDialogProps {
+    cancelLabel?: string;
+    isOpen: boolean;
+    onCancel: VoidFunction;
+    onConfirm: VoidFunction;
+    submitLabel?: string;
+    title: string;
+}
+export declare function ConfirmationDialog({ cancelLabel, isOpen, onCancel, onConfirm, submitLabel, title, }: ConfirmationDialogProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/modals/confirmation/confirmation-dialog.stories.d.ts

@@ -0,0 +1,19 @@
+import type { StoryObj } from '@storybook/react';
+import { ConfirmationDialog } from './confirmation-dialog';
+declare const meta: {
+    argTypes: {
+        isOpen: {
+            control: {
+                type: "boolean";
+            };
+        };
+    };
+    component: typeof ConfirmationDialog;
+    parameters: {
+        layout: string;
+    };
+    title: string;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/src/modals/dialog/dialog.d.ts

@@ -3,17 +3,22 @@ import { Form as AriaForm } from 'react-aria-components';
 import { ModalProps } from 'modals/modal/modal';
 interface DialogProps extends Omit<ModalProps, 'children'> {
     allowClose?: boolean;
-    children: ReactNode | ((props: {
+    cancelLabel?: string;
+    children?: ReactNode | ((props: {
         close: VoidFunction;
     }) => ReactNode);
     dialogClassName?: string;
-    footer?: ReactNode | ((props: {
-        close: VoidFunction;
-    }) => ReactNode);
+    footer?: ReactNode | ((props: DialogFooterProps) => ReactNode);
     hideTitle?: boolean;
     onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
+    submitLabel?: string;
     title: string;
     validationErrors?: ComponentProps<typeof AriaForm>['validationErrors'];
 }
-export declare function Dialog({ allowClose, children, className, dialogClassName, footer, hasCloseButton, hideTitle, isDismissable, isFullScreen, isKeyboardDismissDisabled, isOpen, onOpenChange, onSubmit, shouldCloseOnInteractOutside, title, validationErrors, }: DialogProps): import("react/jsx-runtime").JSX.Element;
+interface DialogFooterProps {
+    cancelLabel: string;
+    close: VoidFunction;
+    submitLabel: string;
+}
+export declare function Dialog({ allowClose, cancelLabel, children, className, dialogClassName, footer, hasCloseButton, hideTitle, isDismissable, isFullScreen, isKeyboardDismissDisabled, isOpen, onOpenChange, onSubmit, shouldCloseOnInteractOutside, submitLabel, title, validationErrors, }: DialogProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/shared/api/bff/hooks/use-fetch-announcements.d.ts

@@ -1,3 +1,6 @@
-import { FetchAnnouncementsArgs } from 'shared/api/bff/services/bff-service';
 import { Announcement } from 'shared/model/announcement';
+interface FetchAnnouncementsArgs {
+    languageCode: string;
+}
 export declare function useFetchAnnouncements({ languageCode, }: FetchAnnouncementsArgs): import("@tanstack/react-query").UseQueryResult<Announcement[], Error>;
+export {};

package/dist/src/shared/feature-flags/use-feature-flags.d.ts

@@ -1,6 +1,6 @@
 declare const features: {
     readonly language: "language";
-    readonly pdpv1: "pdpV1";
+    readonly pdp: "pdpV2";
     readonly plpv1: "plpV1";
     readonly searchv1: "searchV1";
 };

package/dist/src/shared/model/price.d.ts

@@ -3,3 +3,8 @@ export interface ProductPrice {
     originalPrice: number;
     price: number;
 }
+export interface ProductTotalPrice {
+    originalTotalPrice: number;
+    pricePerUnit?: number;
+    totalPrice: number;
+}

package/dist/src/shared/utils/date.d.ts

@@ -0,0 +1,11 @@
+export type DateUnit = 'day' | 'week' | 'month';
+export type DateUnitObject = {
+    number: number;
+    unit: DateUnit;
+};
+export type DateThreshold = {
+    dateUnitObject: DateUnitObject;
+    numberOfDays: number;
+};
+export declare function getDateUnitObject(date: Date): DateUnitObject;
+export declare function convertDateUnitToPluralOrSingle(unit: DateUnit, number: number): 'day' | 'days' | 'week' | 'weeks' | 'month' | 'months';

package/dist/src/shared/utils/date.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/styles.css

@@ -952,6 +952,7 @@
 
 .product-price-module-oIU1K {
   --current-price-color: var(--color-brand-black);
+  --original-price-font-size: var(--font-size-18);
   --current-price-font-style: normal;
   --font-size-wholes: var(--price-font-size-wholes, var(--font-size-36));
   --font-size-decimals: var(--price-font-size-decimals, var(--font-size-24));
@@ -964,7 +965,7 @@
   .product-price-module-oIU1K .product-price-module-til0s {
     padding-left: var(--space-4);
     color: var(--color-brand-dark-gray);
-    font-size: var(--font-size-18);
+    font-size: var(--original-price-font-size);
     font-weight: var(--font-weight-bold);
     text-decoration: line-through;
   }
@@ -985,14 +986,14 @@
     position: relative;
     display: flex;
     color: var(--current-price-color);
-    font-size: var(--font-size-36);
+    font-size: var(--font-size-wholes);
     font-style: var(--current-price-font-style);
     font-weight: var(--font-weight-black);
   }
 
   .product-price-module-oIU1K .product-price-module-pvy2w .product-price-module-GCw07,
     .product-price-module-oIU1K .product-price-module-pvy2w .product-price-module-N56iV {
-      font-size: var(--font-size-wholes);
+      font-size: inherit;
       font-weight: inherit;
     }
 
@@ -1004,6 +1005,7 @@
       font-weight: inherit;
     }
 
+  .product-price-module-oIU1K .product-price-module-syhum,
   .product-price-module-oIU1K .product-price-module-96DoG {
     color: var(--color-brand-dark-gray);
     font-size: var(--font-size-12);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonic-equipment/ui",
-  "version": "0.0.112",
+  "version": "0.0.113",
   "type": "module",
   "license": "MIT",
   "engines": {
@@ -36,7 +36,8 @@
     "start": "http-server ./storybook-static",
     "stylelint": "stylelint --config .stylelintrc.cjs \"src/**/*.css\"",
     "stylelint:fix": "stylelint --config .stylelintrc.cjs \"src/**/*.css\" --formatter verbose --fix",
-    "test:all": "npx concurrently -g --names \"TSC,ESLINT,STYLELINT\" -c auto --kill-others-on-fail \"npm run test:types\" \"npm run lint\" \"npm run stylelint\"",
+    "test:all": "npx concurrently -g --names \"TSC,VITEST,ESLINT,STYLELINT\" -c auto --kill-others-on-fail \"npm run test:types\"  \"npm run test:unit\" \"npm run lint\" \"npm run stylelint\"",
+    "test:unit": "vitest run",
     "test:types": "tsc --noEmit --pretty false",
     "update-packages": "npx npm-check-updates -u"
   },
@@ -69,6 +70,7 @@
     "@storybook/test": "8.4.2",
     "@types/js-cookie": "3.0.6",
     "@types/node": "22.9.0",
+    "@types/postcss-import": "14.0.3",
     "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",
     "@typescript-eslint/eslint-plugin": "8.13.0",
@@ -113,7 +115,8 @@
     "stylelint-config-standard": "36.0.1",
     "typescript": "5.6.3",
     "vite": "5.4.10",
-    "vite-tsconfig-paths": "5.1.0"
+    "vite-tsconfig-paths": "5.1.0",
+    "vitest": "2.1.5"
   },
   "dependencies": {
     "@algolia/autocomplete-core": "1.17.7",