@sonic-equipment/ui 214.0.0 → 216.0.0

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

@@ -0,0 +1,41 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Breadcrumb } from '../../../../breadcrumbs/breadcrumb.js';
+import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
+import { useFetchOrderById } from '../../../../shared/api/storefront/hooks/orders/use-fetch-order-by-id.js';
+import { usePaths } from '../../../../shared/routing/use-paths.js';
+import { ErrorPage } from '../../../error-page/error-page.js';
+import { LoadingPage } from '../../../loading-page/loading-page.js';
+import { MySonicLayoutBreadcrumb } from '../../layouts/my-sonic-layout/my-sonic-layout-breadcrumb.js';
+import { MySonicLayoutPage } from '../../layouts/my-sonic-layout/my-sonic-layout-page.js';
+import { OrderDetailsContent } from './order-details-content.js';
+
+function OrderDetailsPage({ orderId, returnUrl }) {
+    const { data: order, error, isLoading } = useFetchOrderById(orderId);
+    const t = useFormattedMessage();
+    if (isLoading) {
+        return jsx(LoadingPage, {});
+    }
+    if (error) {
+        return jsx(ErrorPage, { error: new Error(error.message) });
+    }
+    if (!order) {
+        return (jsx(ErrorPage, { error: new Error(`Order with ID ${orderId} not found. Please try again later.`) }));
+    }
+    return (jsx(MySonicLayoutPage, { "data-test-selector": "order-history", title: t('Order details'), children: jsx(OrderDetailsContent, { order: order, returnUrl: returnUrl }) }));
+}
+function OrderDetailsPageBreadcrumb({ orderId }) {
+    const t = useFormattedMessage();
+    const paths = usePaths();
+    return (jsx(MySonicLayoutBreadcrumb, { children: jsx(Breadcrumb, { links: [
+                { href: paths.HOME, label: t('Home') },
+                { href: paths.MY_SONIC, label: t('My Sonic') },
+                { href: paths.ACCOUNT_ORDERS, label: t('Orders') },
+                {
+                    href: `${paths.ACCOUNT_ORDERS}/${orderId}`,
+                    label: t('Order details'),
+                },
+            ] }) }));
+}
+
+export { OrderDetailsPage, OrderDetailsPageBreadcrumb };

package/dist/pages/my-sonic/pages/order-history/order-history-page.d.ts

@@ -0,0 +1,2 @@
+export declare function OrderHistoryPage(): import("react/jsx-runtime").JSX.Element;
+export declare function OrderHistoryPageBreadcrumb(): import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,7 @@
 "use client";
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useRef, useState, useEffect } from 'react';
+import { Breadcrumb } from '../../../../breadcrumbs/breadcrumb.js';
 import { Link } from '../../../../buttons/link/link.js';
 import { Price } from '../../../../display/price/price.js';
 import { Pagination } from '../../../../filters/pagination/pagination.js';
@@ -13,20 +14,24 @@ import { useIntl } from '../../../../intl/use-intl.js';
 import { DynamicLoadingOverlay } from '../../../../loading/dynamic-loading-overlay.js';
 import { useFetchOrders } from '../../../../shared/api/storefront/hooks/orders/use-fetch-orders.js';
 import { orderStatuses } from '../../../../shared/api/storefront/model/storefront.model.js';
+import { usePaths } from '../../../../shared/routing/use-paths.js';
 import { scrollIntoViewRef } from '../../../../shared/utils/scrolling.js';
 import { DataTable } from '../../../../table/data-table.js';
 import { ErrorPage } from '../../../error-page/error-page.js';
-import styles from './order-history.module.css.js';
+import { MySonicLayoutBreadcrumb } from '../../layouts/my-sonic-layout/my-sonic-layout-breadcrumb.js';
+import { MySonicLayoutPage } from '../../layouts/my-sonic-layout/my-sonic-layout-page.js';
+import styles from './order-history-page.module.css.js';
 
 const dateOptions = {
     day: 'numeric',
     month: 'numeric',
     year: 'numeric',
 };
-function OrderHistory() {
+function OrderHistoryPage() {
     const t = useFormattedMessage();
     const { cultureCode } = useIntl();
     const orderHistoryRef = useRef(null);
+    const paths = usePaths();
     const [status, setStatus] = useState();
     const [search, setSearch] = useState('');
     const [sort, setSort] = useState({
@@ -66,7 +71,7 @@ function OrderHistory() {
         ...options,
         [status]: t(`orderStatus.${status}`),
     }), { any: t('orderStatus.Any') });
-    return (jsx(Fragment, { children: jsxs("section", { ref: orderHistoryRef, className: styles['order-history'], "data-test-selector": "order-history", children: [jsx("div", { className: styles['search'], children: jsx(SearchField, { isDebounced: true, "data-test-selector": "order-history-search", label: t('Search orders'), onChange: searchOrders, placeholder: t('Search orders'), showLabel: false, variant: "outline" }) }), jsx("div", { className: styles['filter'], children: jsx(SelectField, { "data-test-selector": "order-history-filter", label: t('Filter order status'), onChange: filterOrders, options: filterOptions, selectedOption: status, showLabel: false }) }), jsx("div", { "aria-label": t('Results'), "aria-live": "polite", className: styles['results'], children: jsx(DynamicLoadingOverlay, { isLoading: isFetching, children: orders && orders.length > 0 ? (jsx(DataTable, { actions: [
+    return (jsx(MySonicLayoutPage, { "data-test-selector": "order-history", title: t('Order history'), children: jsxs("section", { ref: orderHistoryRef, className: styles['order-history'], children: [jsx("div", { className: styles['search'], children: jsx(SearchField, { isDebounced: true, "data-test-selector": "order-history-search", label: t('Search orders'), onChange: searchOrders, placeholder: t('Search orders'), showLabel: false, variant: "outline" }) }), jsx("div", { className: styles['filter'], children: jsx(SelectField, { "data-test-selector": "order-history-filter", label: t('Filter order status'), onChange: filterOrders, options: filterOptions, selectedOption: status, showLabel: false }) }), jsx("div", { "aria-label": t('Results'), "aria-live": "polite", className: styles['results'], children: jsx(DynamicLoadingOverlay, { isLoading: isFetching, children: orders && orders.length > 0 ? (jsx(DataTable, { actions: [
                                 {
                                     'data-test-selector': 'order-history-reorder',
                                     isPrimary: false,
@@ -87,7 +92,7 @@ function OrderHistory() {
                                     },
                                     sort: { direction: 'DESC', isEnabled: true },
                                     value: {
-                                        render: order => (jsx(Link, { hasUnderline: true, color: "secondary", "data-test-selector": "order-history-order-link", href: `/my-sonic/order-history/${order.id}`, onClick: () => window?.alert(`open ${order.id}`), children: order.webOrderNumber })),
+                                        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 })),
                                     },
                                 },
                                 {
@@ -154,7 +159,11 @@ function OrderHistory() {
                                         label: 'Reorder',
                                     },
                                     key: 'reorder',
-                                    props: { align: 'center', nowrap: true },
+                                    props: {
+                                        align: 'center',
+                                        'data-test-selector': 'reorderButton',
+                                        nowrap: true,
+                                    },
                                     value: { action: 'reorder' },
                                 },
                             ], data: orders, onSort: (key, direction) => {
@@ -168,5 +177,14 @@ function OrderHistory() {
                                 'data-test-selector': (order, _) => `order-${order.id}`,
                             } })) : (!isFetching && (jsx("p", { className: styles['no-results'], children: t('No orders found.') }))) }) }), orders && orders.length > 0 && (jsx("nav", { className: styles['paging'], children: jsx(Pagination, { currentPage: pagination?.currentPage || 1, "data-test-selector": "order-history-pagination", onChange: page => setPage(page), totalPages: pagination?.numberOfPages || 1 }) })), jsx("div", { className: styles['sticky-bar'], role: "presentation" })] }) }));
 }
+function OrderHistoryPageBreadcrumb() {
+    const t = useFormattedMessage();
+    const paths = usePaths();
+    return (jsx(MySonicLayoutBreadcrumb, { children: jsx(Breadcrumb, { links: [
+                { href: paths.HOME, label: t('Home') },
+                { href: paths.MY_SONIC, label: t('My Sonic') },
+                { href: paths.ACCOUNT_ORDERS, label: t('Orders') },
+            ] }) }));
+}
 
-export { OrderHistory };
+export { OrderHistoryPage, OrderHistoryPageBreadcrumb };

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

@@ -0,0 +1,3 @@
+var styles = {"order-history":"order-history-page-module-A-YGB","search":"order-history-page-module-A-oqW","filter":"order-history-page-module--fnE1","results":"order-history-page-module-Gp4CJ","no-results":"order-history-page-module-ulch1","paging":"order-history-page-module-D35yK","sticky-bar":"order-history-page-module-xgntY"};
+
+export { styles as default };

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

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef } from 'react';
 import { Button } from '../../../buttons/button/button.js';
 import { TableCard } from '../../../cards/table-card/table-card.js';
 import { Pagination } from '../../../filters/pagination/pagination.js';
@@ -39,20 +39,21 @@ function ConnectedAddressBookWidget() {
         pagination: {},
         shipTos: [],
     };
-    useEffect(() => {
-        scrollIntoViewRef(addressBookRef);
-    }, [page]);
     const searchAddresses = (value) => {
         if (value.length >= 3 || value.length === 0) {
             setPage(1);
             setSearch(value);
+            scrollIntoViewRef(addressBookRef);
         }
     };
-    return (jsx(TableCard, { stickyHeader: true, actions: [
+    return (jsx(TableCard, { ref: addressBookRef, stickyHeader: true, actions: [
             jsx(SearchField, { isDebounced: true, className: styles['search-field'], "data-test-selector": "address-book-search", label: t('Search'), onChange: searchAddresses, placeholder: t('Search'), showLabel: false, size: "md", variant: "outline" }, "searchAddresses"),
             jsx(Button, { color: "secondary", "data-test-selector": "address-book-add-address", href: `${paths.ACCOUNT_EDIT_BILL_TO_ADDRESS}/current${paths.ACCOUNT_EDIT_SHIP_TO_ADDRESS}/new?returnUrl=${encodeURIComponent(`${href}#${addressBookId}`)}`, size: "sm", variant: "outline", children: t('Add address') }, "addAddress"),
         ], className: styles['address-book-widget'], "data-test-selector": "address-book", id: addressBookId, isLoading: isFetching, paging: addresses &&
-            addresses.length > 0 && (jsx("nav", { className: styles['paging'], children: jsx(Pagination, { currentPage: pagination?.currentPage || 1, onChange: page => setPage(page), totalPages: pagination?.numberOfPages || 1 }) })), results: addresses ? addresses.length : 0, showError: error, title: "Address book", children: jsx("div", { ref: addressBookRef, "aria-label": "Results", "aria-live": "polite", className: styles['results'], children: jsx(DynamicLoadingOverlay, { isLoading: isFetching, children: jsx(DataTable, { actions: [
+            addresses.length > 0 && (jsx("nav", { className: styles['paging'], children: jsx(Pagination, { currentPage: pagination?.currentPage || 1, onChange: page => {
+                    setPage(page);
+                    scrollIntoViewRef(addressBookRef);
+                }, totalPages: pagination?.numberOfPages || 1 }) })), results: addresses ? addresses.length : 0, showError: error, title: "Address book", children: jsx("div", { "aria-label": "Results", "aria-live": "polite", className: styles['results'], children: jsx(DynamicLoadingOverlay, { isLoading: isFetching, children: jsx(DataTable, { actions: [
                         {
                             'data-test-selector': 'edit-address',
                             href: address => `${paths.ACCOUNT_EDIT_BILL_TO_ADDRESS}/current${paths.ACCOUNT_EDIT_SHIP_TO_ADDRESS}/${address.id}?returnUrl=${encodeURIComponent(`${href}#${addressBookId}`)}`,
@@ -163,6 +164,7 @@ function ConnectedAddressBookWidget() {
                             name: key,
                             order: direction,
                         });
+                        scrollIntoViewRef(addressBookRef);
                     }, row: {
                         'data-test-selector': (address, _) => `address-${address.id}`,
                         selected: (address, _) => address.isDefault,

package/dist/pages/product/product-listing-page/product-listing-page-provider/product-listing-page-context.d.ts

@@ -5,4 +5,4 @@ export interface ProductListingPageContextType {
     isError?: boolean;
     isLoading?: boolean;
 }
-export declare const ProductListingPageContext: import("react").Context<ProductListingPageContextType>;
+export declare const ProductListingPageContext: React.Context<ProductListingPageContextType>;

package/dist/shared/api/storefront/hooks/orders/use-fetch-order-by-id.d.ts

@@ -0,0 +1 @@
+export declare function useFetchOrderById(id: string): import("@tanstack/react-query").UseQueryResult<import("../../model/storefront.model").OrderModel, Error>;

package/dist/shared/api/storefront/hooks/orders/use-fetch-order-by-id.js

@@ -0,0 +1,14 @@
+"use client";
+import { useQuery } from '@tanstack/react-query';
+import { fetchOrderById } from '../../services/order-service.js';
+
+function useFetchOrderById(id) {
+    return useQuery({
+        enabled: Boolean(id),
+        placeholderData: prev => prev,
+        queryFn: () => fetchOrderById(id),
+        queryKey: ['order', id],
+    });
+}
+
+export { useFetchOrderById };

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

@@ -1,4 +1,5 @@
 import { JSX } from 'react';
+import { CurrencyCode } from '../../../../intl/types';
 export interface BaseModel {
     properties: {
         [key: string]: string;
@@ -2219,7 +2220,7 @@ export interface OrderModel extends BaseModel {
     btCountry: string;
     canAddAllToCart: boolean;
     canAddToCart: boolean;
-    currencyCode: string;
+    currencyCode: CurrencyCode;
     currencySymbol: string;
     customerNumber: string;
     customerPO: string;

package/dist/shared/api/storefront/services/order-service.d.ts

@@ -1,4 +1,4 @@
-import { OrderCollectionModel, OrderStatus, SortOption } from '../model/storefront.model';
+import { OrderCollectionModel, OrderModel, OrderStatus, SortOption } from '../model/storefront.model';
 export declare function fetchOrders({ page, pageSize, search, sort, status, }?: {
     page?: number;
     pageSize?: number;
@@ -6,3 +6,5 @@ export declare function fetchOrders({ page, pageSize, search, sort, status, }?:
     sort?: SortOption;
     status?: OrderStatus;
 }): Promise<OrderCollectionModel>;
+export type ExpansionType = 'orderLines' | 'shipments' | 'vmidetails';
+export declare function fetchOrderById(id: string, expand?: ExpansionType[]): Promise<OrderModel>;

package/dist/shared/api/storefront/services/order-service.js

@@ -25,5 +25,16 @@ async function fetchOrders({ page = 1, pageSize = 20, search, sort, status, } =
     body.orders?.forEach(order => (order.status = fromApiStatusToOrderStatus(order.status)));
     return body;
 }
+async function fetchOrderById(id, expand = ['orderLines', 'shipments']) {
+    const { body } = await request({
+        credentials: 'include',
+        params: {
+            expand,
+        },
+        url: `${config.SHOP_API_URL}/api/v1/orders/${id}`,
+    });
+    body.status = fromApiStatusToOrderStatus(body.status);
+    return body;
+}
 
-export { fetchOrders };
+export { fetchOrderById, fetchOrders };

package/dist/shared/data/order.d.ts

@@ -0,0 +1,2 @@
+import { OrderModel } from '../api/storefront/model/storefront.model';
+export declare const orderModel: OrderModel;

package/dist/shared/data/order.js

@@ -0,0 +1,41 @@
+const orderModel = {
+    billToCity: 'Basel',
+    billToPostalCode: '4051',
+    btAddress1: '1 St. Alban-Graben',
+    btAddress2: '',
+    btAddress3: '',
+    btCompanyName: 'TestIt CYPRESSDIDIT StableCHFR',
+    btCountry: 'Switzerland',
+    currencyCode: 'CHF',
+    customerNumber: 'C002733',
+    id: 'bedcd4dd-cc40-4a96-aef9-b3440054ae76',
+    orderDate: new Date('2025-08-24T00:00:00'),
+    orderLines: [
+        {
+            altText: 'TEST Slotted screwdriver 10mm',
+            customerProductNumber: '',
+            id: '7199e7c5-a248-44a2-ad37-b3440054ae78',
+            lineTotal: 5000,
+            mediumImagePath: 'https://images.sonic-equipment.com/TEST13110/test-slotted-screwdriver-10mm_BaseProductImage_13355-002.webp',
+            productId: 'd9d13b6a-85c6-488d-8837-b259017ef5ab',
+            productUri: '/Product/TEST13110-Slotted-screwdriver-10mm',
+            qtyOrdered: 10,
+            shortDescription: 'TEST Slotted screwdriver 10mm',
+            unitPrice: 500,
+        },
+    ],
+    orderSubTotal: 5000,
+    orderTotal: 5405,
+    shipToCity: 'Basel',
+    shipToPostalCode: '4051',
+    shippingAndHandling: 0,
+    stAddress1: '1 St. Alban-Graben',
+    stAddress2: '',
+    stAddress3: '',
+    stCompanyName: 'TestIt CYPRESSDIDIT StableCHFR',
+    stCountry: 'Switzerland',
+    status: 'ForwardToReseller',
+    taxAmount: 405,
+};
+
+export { orderModel };

package/dist/shared/hooks/use-inert.d.ts

@@ -0,0 +1,3 @@
+export declare const useInert: <T extends HTMLElement>(isEnabled: boolean | undefined | null) => {
+    ref: React.MutableRefObject<T | null>;
+};

package/dist/shared/hooks/use-inert.js

@@ -0,0 +1,16 @@
+"use client";
+import { useRef, useEffect } from 'react';
+
+// TODO: when moving to React 19, we should simply set the inert attribute on the element (boolean value)
+const useInert = (isEnabled) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        if (isEnabled)
+            ref.current?.removeAttribute('inert');
+        else
+            ref.current?.setAttribute('inert', '');
+    }, [isEnabled]);
+    return { ref };
+};
+
+export { useInert };

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

@@ -18,7 +18,7 @@ export interface Address {
     attention: string;
     city: string;
     companyName: string;
-    country: AddressCountry | null | undefined;
+    country: AddressCountry | null | undefined | string;
     email: string;
     firstName: string;
     lastName: string;

package/dist/shared/providers/global-state-provider.d.ts

@@ -15,7 +15,7 @@ declare class GlobalState {
     get<T>(key: string | symbol, initialState: T | undefined): State<T>;
     set<T>(key: string | symbol, state: State<T>): void;
 }
-export declare const GlobalStateProviderContext: import("react").Context<GlobalState>;
+export declare const GlobalStateProviderContext: React.Context<GlobalState>;
 interface GlobalStateProviderProps {
     children: ReactNode;
 }

package/dist/shared/routing/route-context.d.ts

@@ -1,2 +1,2 @@
 import { RouteContextValue } from './types';
-export declare const RouteContext: import("react").Context<RouteContextValue | undefined>;
+export declare const RouteContext: React.Context<RouteContextValue | undefined>;

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

@@ -8,12 +8,12 @@ export interface Paths {
     ACCOUNT_INVOICES: string;
     ACCOUNT_MY_LISTS: string;
     ACCOUNT_ORDERS: string;
-    ACCOUNT_SETTINGS: string;
     CART: string;
     CHECKOUT_SHIPPING: string;
     CHECKOUT_SHIPPING_VIA_SIGNIN: string;
     FAVORITES: string;
     HOME: string;
+    MY_SONIC: string;
     ORDER_CONFIRMATION: string;
     REVIEW_AND_SUBMIT: string;
     SIGN_IN: string;

package/dist/shared/routing/use-route-link-element.d.ts

@@ -1 +1 @@
-export declare function useRouteLinkElement(): import("react").ElementType<import("./types").RouteLinkElementProps>;
+export declare function useRouteLinkElement(): React.ElementType<import("./types").RouteLinkElementProps>;

package/dist/shared/routing/use-route-link.d.ts

@@ -1,6 +1,6 @@
 import { NavigateOptions } from './types';
 export declare function useRouteLink(): {
-    RouteLinkElement: import("react").ElementType<import("./types").RouteLinkElementProps>;
+    RouteLinkElement: React.ElementType<import("./types").RouteLinkElementProps>;
     getRouteLinkProps: (href: string, route?: NavigateOptions) => {
         href: string;
         onNavigate: () => void;

package/dist/shared/routing/with-routing.d.ts

@@ -4,5 +4,5 @@ export interface WithRoutingProps {
     href?: string;
     route?: NavigateOptions;
 }
-export declare function withRouting(component: ElementType<RouteLinkElementProps>): import("react").FunctionComponent<RouteLinkElementProps>;
-export declare const FallbackRouteLink: import("react").FunctionComponent<RouteLinkElementProps>;
+export declare function withRouting(component: ElementType<RouteLinkElementProps>): React.FunctionComponent<RouteLinkElementProps>;
+export declare const FallbackRouteLink: React.FunctionComponent<RouteLinkElementProps>;

package/dist/sidebar/sidebar.js

@@ -3,18 +3,20 @@ 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 { 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 { isDocked, isOpen, toggle, transition } = useSidebar();
-    return (jsxs("aside", { "aria-hidden": !isOpen, className: clsx(styles.sidebar, {
+    const { ref: sidebarRef } = useInert(isOpen);
+    return (jsxs("aside", { ref: sidebarRef, "aria-hidden": !isOpen.toString(), className: clsx(styles.sidebar, {
             [styles['transition']]: transition,
             [styles['is-open']]: isOpen,
             [styles['is-closed']]: !isOpen,
             [styles['is-docked']]: isDocked,
             [styles['is-not-docked']]: !isDocked,
-        }, className), inert: isOpen ? undefined : true, 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, color: "secondary", onClick: toggle, children: jsx(StrokeCloseboxIcon, {}) }), jsx("div", { className: styles['content'], children: children })] }));
 }
 
 export { Sidebar };