@sonic-equipment/ui 259.0.2 → 260.0.0

package/dist/pages/countries-page/countries-page.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { ConnectedCountryLanguageSelectionList } from '../../country-language-selection-list/connected-country-language-selection-list.js';
+import { useFormattedMessage } from '../../intl/use-formatted-message.js';
+import { usePaths } from '../../shared/routing/use-paths.js';
+import { Page } from '../components/page/page.js';
+
+function CountriesPage() {
+    const paths = usePaths();
+    const t = useFormattedMessage();
+    const title = t('Choose your country or region…');
+    return (jsx(Page, { breadcrumb: [
+            { href: paths.HOME, label: 'Home' },
+            { href: '', label: 'Countries' },
+        ], "data-test-selector": "countriesPage", title: title, children: jsx(ConnectedCountryLanguageSelectionList, {}) }));
+}
+
+export { CountriesPage };

package/dist/pages/error-page/error-page.js

@@ -13,7 +13,7 @@ function ErrorPage({ error, title = 'Something went wrong', }) {
     }, [error]);
     return (jsx(Page, { breadcrumb: [
             { href: paths.HOME, label: 'Home' },
-            { href: paths.HOME, label: 'Error' },
+            { href: '', label: 'Error' },
         ], "data-test-selector": "errorPage", title: title, children: jsx(DefaultErrorView, { error: error, title: "" }) }));
 }
 

package/dist/pages/my-sonic/actions/change-customer/change-customer.js

@@ -5,7 +5,7 @@ import { ListBox, ListBoxItem, Text } from 'react-aria-components';
 import clsx from 'clsx';
 import { Checkbox } from '../../../../forms/elements/checkbox/checkbox.js';
 import { SearchField } from '../../../../forms/fields/search-field/search-field.js';
-import { SolidRatingIcon } from '../../../../icons/solid/solid-rating-icon.js';
+import { Icon } from '../../../../icon/icon.js';
 import { FormattedMessage } from '../../../../intl/formatted-message.js';
 import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
 import { Message } from '../../../../message/message.js';
@@ -57,7 +57,7 @@ function ChangeCustomer({ allowSetDefault = false, className, data, defaultCusto
                     if (key === 'ArrowDown') {
                         listBoxRef.current?.focus();
                     }
-                }, placeholder: t('Search for a customer'), showLabel: false, size: "md", value: filter, variant: "outline" }), jsx(ListBox, { ref: listBoxRef, "aria-label": "List of customers", "aria-live": "polite", className: styles['list-box'], id: "filtered-customer-results-list", items: listBoxItems, onAction: key => onCustomerSelected?.(String(key)), onSelectionChange: keys => onCustomerSelectionChanged(String([...keys][0])), renderEmptyState: () => !isLoading && (jsx(Message, { type: "info", children: jsx(FormattedMessage, { id: "No results found. Please refine your search." }) })), selectionBehavior: "replace", selectionMode: "single", children: listBoxItem => 'type' in listBoxItem ? (jsx(ListBoxItem, { isDisabled: true, textValue: listBoxItem.id, children: jsx(Message, { type: listBoxItem.type, children: jsx(Text, { slot: "description", children: listBoxItem.message }) }) }, "marker")) : (jsxs(ListBoxItem, { className: styles['list-box-item'], id: listBoxItem.id, textValue: listBoxItem.id, children: [jsxs(Text, { slot: "label", children: [jsxs("div", { className: styles['company-name'], children: [jsx(HighlightText, { className: styles['company-name-text'], highlightText: filter, text: `${listBoxItem.companyName}` }), defaultCustomerId === listBoxItem.id && (jsx(SolidRatingIcon, { className: styles['selected-icon'] }))] }), jsx(HighlightText, { className: styles['customer-number'], highlightText: filter, text: `${listBoxItem.customerNumber}` })] }), jsxs(Text, { slot: "description", children: [jsx("div", { children: jsx(HighlightText, { highlightText: filter, text: [
+                }, placeholder: t('Search for a customer'), showLabel: false, size: "md", value: filter, variant: "outline" }), jsx(ListBox, { ref: listBoxRef, "aria-label": "List of customers", "aria-live": "polite", className: styles['list-box'], id: "filtered-customer-results-list", items: listBoxItems, onAction: key => onCustomerSelected?.(String(key)), onSelectionChange: keys => onCustomerSelectionChanged(String([...keys][0])), renderEmptyState: () => !isLoading && (jsx(Message, { type: "info", children: jsx(FormattedMessage, { id: "No results found. Please refine your search." }) })), selectionBehavior: "replace", selectionMode: "single", children: listBoxItem => 'type' in listBoxItem ? (jsx(ListBoxItem, { isDisabled: true, textValue: listBoxItem.id, children: jsx(Message, { type: listBoxItem.type, children: jsx(Text, { slot: "description", children: listBoxItem.message }) }) }, "marker")) : (jsxs(ListBoxItem, { className: styles['list-box-item'], id: listBoxItem.id, textValue: listBoxItem.id, children: [jsxs(Text, { slot: "label", children: [jsxs("div", { className: styles['company-name'], children: [jsx(HighlightText, { className: styles['company-name-text'], highlightText: filter, text: `${listBoxItem.companyName}` }), defaultCustomerId === listBoxItem.id && (jsx(Icon, { className: styles['selected-icon'], name: "StarSolid" }))] }), jsx(HighlightText, { className: styles['customer-number'], highlightText: filter, text: `${listBoxItem.customerNumber}` })] }), jsxs(Text, { slot: "description", children: [jsx("div", { children: jsx(HighlightText, { highlightText: filter, text: [
                                             [listBoxItem.firstName, listBoxItem.lastName].join(' '),
                                         ]
                                             .filter(Boolean)

package/dist/pages/my-sonic/navigation/my-sonic-desktop-navigation.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
+import { Icon } from '../../../icon/icon.js';
 import { FormattedMessage } from '../../../intl/formatted-message.js';
 import { MenuList } from '../../../lists/menu-list/menu-list.js';
 import { MenuListItem } from '../../../lists/menu-list/menu-list-item.js';
@@ -10,7 +11,7 @@ import styles from './my-sonic-desktop-navigation.module.css.js';
 function MySonicDesktopNavigation({ className, currentPath, onSignOut, }) {
     const mySonicNavigationItems = useMySonicNavigationItems();
     const { basePathname } = useLocation();
-    return (jsx(MenuList, { collapsible: true, className: className, children: mySonicNavigationItems.map(item => (jsx(MenuListItem, { badge: jsx(item.Icon, {}), "data-test-selector": item['data-test-selector'], ...(item.type === 'action'
+    return (jsx(MenuList, { collapsible: true, className: className, children: mySonicNavigationItems.map(item => (jsx(MenuListItem, { badge: jsx(Icon, { name: item.icon }), "data-test-selector": item['data-test-selector'], ...(item.type === 'action'
                 ? item.action === 'signout'
                     ? { onClick: onSignOut }
                     : {}

package/dist/pages/my-sonic/navigation/my-sonic-navigation-items.d.ts

@@ -1,8 +1,8 @@
-import { ComponentType } from 'react';
+import { IconName } from '../../../icons';
 import { TranslationId } from '../../../intl/translation-id';
 interface MySonicNavigationItemBase {
-    Icon: ComponentType;
     'data-test-selector'?: string;
+    icon: IconName;
     label: TranslationId;
     type: 'link' | 'action';
 }

package/dist/pages/my-sonic/navigation/my-sonic-navigation-items.js

@@ -1,8 +1,4 @@
 "use client";
-import { SolidCartIcon } from '../../../icons/solid/solid-cart-icon.js';
-import { SolidFavoriteIcon } from '../../../icons/solid/solid-favorite-icon.js';
-import { SolidLoginIcon } from '../../../icons/solid/solid-login-icon.js';
-import { SolidLogOutIcon } from '../../../icons/solid/solid-logout-icon.js';
 import { usePaths } from '../../../shared/routing/use-paths.js';
 import { isObject } from '../../../shared/utils/types.js';
 
@@ -16,30 +12,30 @@ function useMySonicNavigationItems() {
     const paths = usePaths();
     return [
         {
-            Icon: SolidLoginIcon,
             'data-test-selector': 'accountLink',
+            icon: 'UserSolid',
             label: 'Account',
             path: paths.ACCOUNT,
             type: 'link',
         },
         {
-            Icon: SolidFavoriteIcon,
             'data-test-selector': 'favoritesLink',
+            icon: 'FavoriteSolid',
             label: 'Favorites',
             path: paths.ACCOUNT_MY_LISTS,
             type: 'link',
         },
         {
-            Icon: SolidCartIcon,
             'data-test-selector': 'ordersLink',
+            icon: 'CartSolid',
             label: 'Orders',
             path: paths.ACCOUNT_ORDERS,
             type: 'link',
         },
         {
-            Icon: SolidLogOutIcon,
             action: 'signout',
             'data-test-selector': 'logoutButton',
+            icon: 'SignOutSolid',
             label: 'Log out',
             type: 'action',
         },

package/dist/pages/my-sonic/pages/order-details/order-details-content.js

@@ -64,7 +64,7 @@ function OrderDetailsContent({ order, reorderButton, returnUrl, }) {
                                 originalTotalPrice: ensureNumber(line.lineTotal),
                                 pricePerUnit: line.unitPrice,
                                 totalPrice: line.lineTotal,
-                            }, productId: line.productId, quantity: line.qtyOrdered, sku: line.customerProductNumber, title: line.shortDescription }, line.id))) })] }), jsx("section", { className: styles['order-cost-overview'], children: jsx(CartTotals, { currencyCode: order.currencyCode, shippingCost: order.shippingAndHandling, subtotal: order.orderSubTotal, tax: order.taxAmount, total: order.orderTotal, vatPercentage: undefined }) }), jsx("section", { className: styles['order-bottom-button'], children: jsx(Button, { color: "secondary", href: returnUrl || paths.ACCOUNT_ORDERS, variant: "outline", children: jsx(FormattedMessage, { id: "Back" }) }) })] }));
+                            }, productId: line.productId, quantity: line.qtyOrdered, sku: line.productErpNumber, title: line.shortDescription }, line.id))) })] }), jsx("section", { className: styles['order-cost-overview'], children: jsx(CartTotals, { currencyCode: order.currencyCode, shippingCost: order.shippingAndHandling, subtotal: order.orderSubTotal, tax: order.taxAmount, total: order.orderTotal, vatPercentage: undefined }) }), jsx("section", { className: styles['order-bottom-button'], children: jsx(Button, { color: "secondary", href: returnUrl || paths.ACCOUNT_ORDERS, variant: "outline", children: jsx(FormattedMessage, { id: "Back" }) }) })] }));
 }
 
 export { OrderDetailsContent, statusMap };

package/dist/pages/my-sonic/pages/order-history/order-history-page.js

@@ -93,7 +93,7 @@ function OrderHistoryPage() {
                                     },
                                     sort: { direction: 'DESC', isEnabled: true },
                                     value: {
-                                        render: order => (jsx(Link, { hasUnderline: true, color: "secondary", "data-test-selector": "order-history-order-link", href: `${paths.ACCOUNT_ORDERS}/${order.webOrderNumber}?returnUrl=${encodeURIComponent(`${paths.ACCOUNT_ORDERS}`)}`, children: order.webOrderNumber })),
+                                        render: order => (jsx(Link, { hasUnderline: true, color: "secondary", "data-test-selector": "order-history-ordernumber-link", href: `${paths.ACCOUNT_ORDERS}/${order.webOrderNumber}?returnUrl=${encodeURIComponent(`${paths.ACCOUNT_ORDERS}`)}`, children: order.webOrderNumber })),
                                     },
                                 },
                                 {
@@ -166,7 +166,7 @@ function OrderHistoryPage() {
                                         nowrap: true,
                                     },
                                     value: {
-                                        render: order => (jsx(Link, { hasUnderline: true, color: "secondary", "data-test-selector": "order-history-order-link", href: `${paths.ACCOUNT_ORDERS}/${order.webOrderNumber}?returnUrl=${encodeURIComponent(`${paths.ACCOUNT_ORDERS}`)}`, children: jsx(FormattedMessage, { id: "Reorder" }) })),
+                                        render: order => (jsx(Link, { hasUnderline: true, color: "secondary", "data-test-selector": "order-history-reorder-link", href: `${paths.ACCOUNT_ORDERS}/${order.webOrderNumber}?returnUrl=${encodeURIComponent(`${paths.ACCOUNT_ORDERS}`)}`, children: jsx(FormattedMessage, { id: "Reorder" }) })),
                                     },
                                 },
                             ], data: orders, onSort: (key, direction) => {

package/dist/pages/my-sonic/widgets/connected-address-book-widget.js

@@ -5,8 +5,8 @@ import { Button } from '../../../buttons/button/button.js';
 import { TableCard } from '../../../cards/table-card/table-card.js';
 import { Pagination } from '../../../filters/pagination/pagination.js';
 import { SearchField } from '../../../forms/fields/search-field/search-field.js';
+import { Icon } from '../../../icon/icon.js';
 import { SolidEditIcon } from '../../../icons/solid/solid-edit-icon.js';
-import { SolidRatingIcon } from '../../../icons/solid/solid-rating-icon.js';
 import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
 import { DynamicLoadingOverlay } from '../../../loading/dynamic-loading-overlay.js';
 import { useFetchPagedShipToAddresses } from '../../../shared/api/storefront/hooks/customer/use-fetch-paged-ship-to-addresses.js';
@@ -73,7 +73,7 @@ function ConnectedAddressBookWidget() {
                             },
                             value: {
                                 render: address => {
-                                    return (address.isDefault && (jsx(SolidRatingIcon, { "aria-label": `(${t('addressProperty.Default')})`, className: styles['default-icon'], "data-test-selector": "default-address" })));
+                                    return (address.isDefault && (jsx(Icon, { className: styles['default-icon'], "data-test-selector": "default-address", label: `(${t('addressProperty.Default')})`, name: "StarSolid" })));
                                 },
                             },
                         },

package/dist/shared/api/storefront/hooks/authentication/use-patch-session.d.ts

@@ -4,11 +4,14 @@ export declare function usePatchSession(): {
     isLoading: boolean;
     isSuccess: boolean;
     mutate: (args_0: {
-        session: Partial<Omit<import("../../model/storefront.model").SessionModel, "billTo" | "shipTo"> & {
+        session: Partial<Omit<import("../../model/storefront.model").SessionModel, "billTo" | "shipTo" | "language"> & {
             billTo?: import("../../model/storefront.model").BillToModel | {
                 id: string;
             } | null;
             billToId?: string | null;
+            language?: import("../../model/storefront.model").LanguageModel | {
+                id: string;
+            } | null;
             shipTo?: import("../../model/storefront.model").ShipToModel | {
                 id: string;
             } | null;

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

@@ -159,11 +159,14 @@ export interface SessionModel extends BaseModel {
     userRoles: string;
     userRolesTranslated: string;
 }
-export type PatchSessionModel = Partial<Omit<SessionModel, 'billTo' | 'shipTo'> & {
+export type PatchSessionModel = Partial<Omit<SessionModel, 'billTo' | 'shipTo' | 'language'> & {
     billTo?: BillToModel | {
         id: string;
     } | null;
     billToId?: string | null;
+    language?: LanguageModel | {
+        id: string;
+    } | null;
     shipTo?: ShipToModel | {
         id: string;
     } | null;

package/dist/shared/error/default-error-view.js

@@ -3,7 +3,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { Button } from '../../buttons/button/button.js';
 import { Details } from '../../display/details/details.js';
-import { StrokeRecentIcon } from '../../icons/stroke/stroke-recent-icon.js';
+import { Icon } from '../../icon/icon.js';
 import { useFormattedMessage } from '../../intl/use-formatted-message.js';
 import { Heading } from '../../typography/heading/heading.js';
 import { isProductionEnvironment } from '../utils/environment.js';
@@ -11,7 +11,7 @@ import styles from './default-error-view.module.css.js';
 
 function DefaultErrorView({ className, error, errorInfo, resetError, resetLabel, showErrorDetails = !isProductionEnvironment, showReset, title, }) {
     const t = useFormattedMessage();
-    return (jsxs("section", { className: clsx(styles['default-error-view'], className), children: [title && (jsx(Heading, { className: styles['title'], size: "s", tag: "h1", children: title || t('Something went wrong') })), jsx("p", { children: error.message || t('An unexpected error occured. Please try again.') }), showErrorDetails && (jsxs(Details, { className: styles['error-details'], lang: "en", summary: "Technical Details (only visible in development mode)", children: [jsx("output", { className: styles['error-kind'], children: error.toString() }), error.stack && (jsxs("div", { className: styles['error-info'], children: [jsx(Heading, { className: styles['error-info-title'], size: "xs", tag: "h2", children: "Stack:" }), jsx("pre", { className: styles['error-info-data'], children: error.stack })] })), errorInfo?.componentStack && (jsxs("div", { className: styles['component-info'], children: [jsx(Heading, { className: styles['error-info-title'], size: "xs", tag: "h2", children: "Component stack:" }), jsx("pre", { className: styles['error-info-data'], children: errorInfo.componentStack })] }))] })), showReset && resetError && (jsx(Button, { light: true, className: styles['reset-button'], color: "secondary", icon: jsx(StrokeRecentIcon, {}), onClick: resetError, size: "sm", type: "button", variant: "outline", children: resetLabel || t('Reset') }))] }));
+    return (jsxs("section", { className: clsx(styles['default-error-view'], className), children: [title && (jsx(Heading, { className: styles['title'], size: "s", tag: "h1", children: title || t('Something went wrong') })), jsx("p", { children: error.message || t('An unexpected error occured. Please try again.') }), showErrorDetails && (jsxs(Details, { className: styles['error-details'], lang: "en", summary: "Technical Details (only visible in development mode)", children: [jsx("output", { className: styles['error-kind'], children: error.toString() }), error.stack && (jsxs("div", { className: styles['error-info'], children: [jsx(Heading, { className: styles['error-info-title'], size: "xs", tag: "h2", children: "Stack:" }), jsx("pre", { className: styles['error-info-data'], children: error.stack })] })), errorInfo?.componentStack && (jsxs("div", { className: styles['component-info'], children: [jsx(Heading, { className: styles['error-info-title'], size: "xs", tag: "h2", children: "Component stack:" }), jsx("pre", { className: styles['error-info-data'], children: errorInfo.componentStack })] }))] })), showReset && resetError && (jsx(Button, { light: true, className: styles['reset-button'], color: "secondary", icon: jsx(Icon, { name: "Refresh", size: "sm" }), onClick: resetError, size: "sm", type: "button", variant: "outline", children: resetLabel || t('Reset') }))] }));
 }
 
 export { DefaultErrorView };

package/dist/shared/hooks/use-resize-observer.js

@@ -1,6 +1,7 @@
 "use client";
 import { useRef, useEffect } from 'react';
 
+// Note on this hook: it does not seem to work on a component that is mounted conditionally
 function useResizeObserver(resizeCallback) {
     let size;
     function onResize(entries, _observer) {

package/dist/sidebar/sidebar.js

@@ -2,12 +2,13 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { IconButton } from '../buttons/icon-button/icon-button.js';
-import { StrokeCloseboxIcon } from '../icons/stroke/stroke-closebox-icon.js';
+import { useFormattedMessage } from '../intl/use-formatted-message.js';
 import { useInert } from '../shared/hooks/use-inert.js';
 import { useSidebar } from './use-sidebar.js';
 import styles from './sidebar.module.css.js';
 
 function Sidebar({ children, className }) {
+    const t = useFormattedMessage();
     const { isDocked, isOpen, toggle, transition } = useSidebar();
     const { ref: sidebarRef } = useInert(isOpen);
     return (jsxs("aside", { ref: sidebarRef, "aria-hidden": !isOpen.toString(), className: clsx(styles.sidebar, {
@@ -16,7 +17,7 @@ function Sidebar({ children, className }) {
             [styles['is-closed']]: !isOpen,
             [styles['is-docked']]: isDocked,
             [styles['is-not-docked']]: !isDocked,
-        }, className), children: [jsx(IconButton, { className: styles.close, color: "secondary", onClick: toggle, children: jsx(StrokeCloseboxIcon, {}) }), jsx("div", { className: styles['content'], children: children })] }));
+        }, className), children: [jsx(IconButton, { className: styles.close, icon: "Close", label: t('Close'), onClick: toggle, size: "lg", theme: "secondary" }), jsx("div", { className: styles['content'], children: children })] }));
 }
 
 export { Sidebar };

package/dist/sidebar/toggle-sidebar-button.js

@@ -1,13 +1,13 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
 import { Button } from '../buttons/button/button.js';
-import { StrokeFilterIcon } from '../icons/stroke/stroke-filter-icon.js';
+import { Icon } from '../icon/icon.js';
 import { FormattedMessage } from '../intl/formatted-message.js';
 import { useSidebar } from './use-sidebar.js';
 
 const ToggleSidebarButton = () => {
     const { isOpen, toggle } = useSidebar();
-    return (jsx(Button, { light: true, color: "secondary", icon: jsx(StrokeFilterIcon, {}), onClick: toggle, size: "sm", variant: "outline", children: isOpen ? (jsx(FormattedMessage, { id: "Hide filters" })) : (jsx(FormattedMessage, { id: "Show filters" })) }));
+    return (jsx(Button, { light: true, color: "secondary", icon: jsx(Icon, { name: "Filter", size: "sm" }), onClick: toggle, size: "sm", variant: "outline", children: isOpen ? (jsx(FormattedMessage, { id: "Hide filters" })) : (jsx(FormattedMessage, { id: "Show filters" })) }));
 };
 
 export { ToggleSidebarButton };