@sonic-equipment/ui 178.0.0 → 180.0.0

package/dist/observers/intersection-observer.d.ts

@@ -1,8 +1,16 @@
 import { ReactNode } from 'react';
 interface IntersectionObserverProps {
+    /** The content to render when the observer is intersecting */
     children: ReactNode;
+    /** Options for the IntersectionObserver */
+    intersectionObserverInit?: IntersectionObserverInit;
+    /** Whether the observer is disabled */
     isDisabled?: boolean;
+    /** Whether the observer is a placeholder.
+     * Once intersected the observer is replaced by its children */
+    isPlaceholder?: boolean;
+    /** Callback when the intersection state changes */
     onIntersectingChange?: (isIntersecting: boolean) => void;
 }
-export declare function IntersectionObserverComponent({ children, isDisabled, onIntersectingChange, }: IntersectionObserverProps): string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | null | undefined;
+export declare function IntersectionObserverComponent({ children, intersectionObserverInit, isDisabled, isPlaceholder, onIntersectingChange, }: IntersectionObserverProps): string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | null | undefined;
 export {};

package/dist/observers/intersection-observer.js

@@ -3,17 +3,20 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef } from 'react';
 import { useIntersectionObserver } from '../shared/hooks/use-intersection-observer.js';
 
-function IntersectionObserverComponent({ children, isDisabled, onIntersectingChange, }) {
+function IntersectionObserverComponent({ children, intersectionObserverInit, isDisabled, isPlaceholder = false, onIntersectingChange, }) {
     const topRef = useRef(null);
     const bottomRef = useRef(null);
-    useIntersectionObserver({
+    const { isIntersecting } = useIntersectionObserver({
+        intersectionObserverInit,
         isDisabled,
         observables: [{ ref: topRef }, { ref: bottomRef }],
         onIntersectingChange,
     });
     if (isDisabled)
         return children;
-    return (jsxs("div", { children: [jsx("div", { ref: topRef }), children, jsx("div", { ref: bottomRef })] }));
+    if (isIntersecting && isPlaceholder)
+        return children;
+    return (jsxs("div", { "data-intersecting": isIntersecting, style: { display: 'contents' }, children: [jsx("div", { ref: topRef, "aria-hidden": true, "data-role": "top of intersection observer" }), isIntersecting && children, jsx("div", { ref: bottomRef, "aria-hidden": true, "data-role": "bottom of intersection observer" })] }));
 }
 
 export { IntersectionObserverComponent };

package/dist/pages/account/components/create-account-form/create-account-form.js

@@ -7,6 +7,7 @@ import { useCountries } from '../../../../country-select/hooks/use-countries.js'
 import { Form } from '../../../../forms/form/form.js';
 import { FormSegment } from '../../../../forms/form/form-segment.js';
 import { FormSegmentGroup } from '../../../../forms/form/form-segment-group.js';
+import { PasswordField } from '../../../../forms/password-field/password-field.js';
 import { SwitchField } from '../../../../forms/switch-field/switch-field.js';
 import { TextField } from '../../../../forms/text-field/text-field.js';
 import { isCountryCode } from '../../../../intl/types.js';
@@ -78,12 +79,12 @@ function CreateAccountForm({ errorType, isDisabled: _isDisabled = false, isPendi
                                 if (!value)
                                     return value;
                                 return (validateEmail(value) || t('Please enter a valid email address'));
-                            } }) }), jsx(FormSegment, { children: jsx(TextField, { autoComplete: "new-password", "data-test-selector": "createAccount_password", info: "Password must be at least 8 characters long, include at least one number, at least one lowercase character, at least one uppercase character and at least one non-alphanumeric character.", isDisabled: isDisabled, isRequired: true, label: t('Password'), name: "password", onChange: setPassword, type: "password", validate: value => {
+                            } }) }), jsx(FormSegment, { children: jsx(PasswordField, { autoComplete: "new-password", "data-test-selector": "createAccount_password", info: "Password must be at least 8 characters long, include at least one number, at least one lowercase character, at least one uppercase character and at least one non-alphanumeric character.", isDisabled: isDisabled, isRequired: true, label: t('Password'), name: "password", onChange: setPassword, validate: value => {
                                 if (!value)
                                     return;
                                 return (validatePassword(value) ||
                                     t('Password does not meet requirements'));
-                            } }) }), jsx(FormSegment, { children: jsx(TextField, { autoComplete: "new-password", customErrorMessage: "Passwords do not match", "data-test-selector": "createAccount_passwordConfirm", isDisabled: isDisabled, isInvalid: isMismatchingPasswords(), isRequired: true, label: t('Confirm password'), onChange: setPasswordConfirm, type: "password", value: passwordConfirm }) })] }), jsxs(FormSegmentGroup, { children: [jsx(FormSegment, { children: jsx(SwitchField, { isDisabled: isDisabled, isSelected: isPrivateAccount, name: "isPrivateAccount", onChange: setIsPrivateAccount, children: t('Private account') }) }), jsx(FormSegment, { children: jsx(TextField, { autoComplete: "organization", "data-test-selector": "createAccount_companyName", isDisabled: isDisabled, isRequired: !isPrivateAccount, label: t('Company name'), name: "companyName", onChange: setCompanyName, value: companyName }, `companyName-${Boolean(isPrivateAccount)}`) }), jsx(FormSegment, { children: jsx(TextField, { autoComplete: "given-name", "data-test-selector": "createAccount_firstName", isDisabled: isDisabled, label: t('First name'), name: "firstName" }) }), jsx(FormSegment, { children: jsx(TextField, { autoComplete: "family-name", "data-test-selector": "createAccount_lastName", isDisabled: isDisabled, isRequired: isPrivateAccount, label: t('Last name'), name: "lastName", onChange: setLastName, value: lastName }, `lastname-${Boolean(isPrivateAccount)}`) }), jsx(FormSegment, { children: jsx(CountrySelect, { isRequired: true, countries: countries || [], "data-test-selector": "createAccount_countrySelect", defaultSelectedCountry: defaultSelectedCountry, isDisabled: isLoadingCountries || isDisabled, isLoading: isLoadingCountries, name: "countrySelect" }, defaultSelectedCountry?.id) })] }), jsx(FormSegmentGroup, { children: jsx(FormSegment, { children: jsx(SwitchField, { isDisabled: isDisabled, name: "isSubscribed", children: t('Sign me up for newsletters and product updates') }) }) })] }));
+                            } }) }), jsx(FormSegment, { children: jsx(PasswordField, { autoComplete: "new-password", customErrorMessage: "Passwords do not match", "data-test-selector": "createAccount_passwordConfirm", isDisabled: isDisabled, isInvalid: isMismatchingPasswords(), isRequired: true, label: t('Confirm password'), onChange: setPasswordConfirm, value: passwordConfirm }) })] }), jsxs(FormSegmentGroup, { children: [jsx(FormSegment, { children: jsx(SwitchField, { isDisabled: isDisabled, isSelected: isPrivateAccount, name: "isPrivateAccount", onChange: setIsPrivateAccount, children: t('Private account') }) }), jsx(FormSegment, { children: jsx(TextField, { autoComplete: "organization", "data-test-selector": "createAccount_companyName", isDisabled: isDisabled, isRequired: !isPrivateAccount, label: t('Company name'), name: "companyName", onChange: setCompanyName, value: companyName }, `companyName-${Boolean(isPrivateAccount)}`) }), jsx(FormSegment, { children: jsx(TextField, { autoComplete: "given-name", "data-test-selector": "createAccount_firstName", isDisabled: isDisabled, label: t('First name'), name: "firstName" }) }), jsx(FormSegment, { children: jsx(TextField, { autoComplete: "family-name", "data-test-selector": "createAccount_lastName", isDisabled: isDisabled, isRequired: isPrivateAccount, label: t('Last name'), name: "lastName", onChange: setLastName, value: lastName }, `lastname-${Boolean(isPrivateAccount)}`) }), jsx(FormSegment, { children: jsx(CountrySelect, { isRequired: true, countries: countries || [], "data-test-selector": "createAccount_countrySelect", defaultSelectedCountry: defaultSelectedCountry, isDisabled: isLoadingCountries || isDisabled, isLoading: isLoadingCountries, name: "countrySelect" }, defaultSelectedCountry?.id) })] }), jsx(FormSegmentGroup, { children: jsx(FormSegment, { children: jsx(SwitchField, { isDisabled: isDisabled, name: "isSubscribed", children: t('Sign me up for newsletters and product updates') }) }) })] }));
 }
 
 export { CreateAccountForm };

package/dist/pages/account/components/sign-in-form/sign-in-form.js

@@ -5,6 +5,7 @@ import { Link } from '../../../../buttons/link/link.js';
 import { Form } from '../../../../forms/form/form.js';
 import { FormSegment } from '../../../../forms/form/form-segment.js';
 import { FormSegmentGroup } from '../../../../forms/form/form-segment-group.js';
+import { PasswordField } from '../../../../forms/password-field/password-field.js';
 import { SwitchField } from '../../../../forms/switch-field/switch-field.js';
 import { TextField } from '../../../../forms/text-field/text-field.js';
 import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
@@ -64,7 +65,7 @@ function SignInForm({ allowGuestSignIn = false, createAccountPath, errorType, in
                             if (!value)
                                 return value;
                             return (validateEmail(value) || t('Please enter a valid email address'));
-                        } }) }), jsx(FormSegment, { children: jsx(TextField, { autoComplete: "current-password", "data-test-selector": "signIn_password", isDisabled: isDisabled, isRequired: true, label: t('Password'), name: "password", showLabel: true, type: "password" }) })] }) }));
+                        } }) }), jsx(FormSegment, { children: jsx(PasswordField, { autoComplete: "current-password", "data-test-selector": "signIn_password", isDisabled: isDisabled, isRequired: true, label: t('Password'), name: "password", showLabel: true }) })] }) }));
 }
 
 export { SignInForm };

package/dist/pages/my-sonic/actions/change-customer/change-customer-dialog.d.ts

@@ -0,0 +1,15 @@
+import { BillToCollectionModel } from '../../../../shared/api/storefront/model/storefront.model';
+export interface ChangeCustomerDialogProps {
+    currentlySelectedCustomerId?: string;
+    data?: BillToCollectionModel;
+    error?: Error | null | unknown;
+    filter?: string;
+    hasErrorSubmitting?: boolean;
+    isLoading?: boolean;
+    isOpen: boolean;
+    isUpdating?: boolean;
+    onClose: () => void;
+    onCustomerSelected: (id: string) => void;
+    onFilterChanged?: (filter: string) => void;
+}
+export declare function ChangeCustomerDialog({ currentlySelectedCustomerId, data, error, filter, hasErrorSubmitting, isLoading, isOpen, isUpdating, onClose, onCustomerSelected, onFilterChanged, }: ChangeCustomerDialogProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,23 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { FormattedMessage } from '../../../../intl/formatted-message.js';
+import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
+import { Message } from '../../../../message/message.js';
+import { Dialog } from '../../../../modals/dialog/dialog.js';
+import { ChangeCustomer } from './change-customer.js';
+import styles from './change-customer-dialog.module.css.js';
+
+function ChangeCustomerDialog({ currentlySelectedCustomerId, data, error, filter, hasErrorSubmitting, isLoading, isOpen, isUpdating = false, onClose, onCustomerSelected, onFilterChanged, }) {
+    const t = useFormattedMessage();
+    const [hasCustomerSelected, setHasCustomerSelected] = useState(false);
+    const [selectedCustomerId, setSelectedCustomerId] = useState();
+    return (jsx(Dialog, { allowSubmit: !hasErrorSubmitting && hasCustomerSelected, className: styles['change-customer-dialog'], isOpen: isOpen, isSubmitting: isUpdating || hasErrorSubmitting, onOpenChange: isOpen => !isOpen && onClose(), onSubmit: () => selectedCustomerId && onCustomerSelected(selectedCustomerId), title: t('Change customer'), children: hasErrorSubmitting ? (jsx(Message, { className: styles.error, type: "danger", children: jsx(FormattedMessage, { id: "An error occurred while changing the customer." }) })) : (jsx(ChangeCustomer, { className: styles.content, data: data, error: error, filter: filter, isLoading: isLoading, onCustomerSelected: id => {
+                setSelectedCustomerId(id);
+                onCustomerSelected(id);
+            }, onCustomerSelectionChanged: id => {
+                setSelectedCustomerId(id);
+                setHasCustomerSelected(true);
+            }, onFilterChanged: onFilterChanged, selectedId: currentlySelectedCustomerId })) }));
+}
+
+export { ChangeCustomerDialog };

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

@@ -0,0 +1,3 @@
+var styles = {"change-customer-dialog":"change-customer-dialog-module-O6oOS","content":"change-customer-dialog-module-OP23q"};
+
+export { styles as default };

package/dist/pages/my-sonic/actions/change-customer/change-customer.d.ts

@@ -0,0 +1,13 @@
+import { BillToCollectionModel } from '../../../../shared/api/storefront/model/storefront.model';
+export interface ChangeCustomerProps {
+    className?: string;
+    data?: BillToCollectionModel;
+    error?: Error | null | unknown;
+    filter?: string;
+    isLoading?: boolean;
+    onCustomerSelected?: (id: string) => void;
+    onCustomerSelectionChanged?: (id: string) => void;
+    onFilterChanged?: (filter: string) => void;
+    selectedId?: string;
+}
+export declare function ChangeCustomer({ className, data, error, filter, isLoading, onCustomerSelected, onCustomerSelectionChanged, onFilterChanged, selectedId, }: ChangeCustomerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,66 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useMemo } from 'react';
+import { ListBox, ListBoxItem, Text } from 'react-aria-components';
+import clsx from 'clsx';
+import { SearchField } from '../../../../forms/search-field/search-field.js';
+import { SolidRatingIcon } from '../../../../icons/solid/solid-rating-icon.js';
+import { FormattedMessage } from '../../../../intl/formatted-message.js';
+import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
+import { Message } from '../../../../message/message.js';
+import { UnauthorizedRequestError } from '../../../../shared/fetch/request.js';
+import { HighlightText } from '../../../../text/highlight-text/highlight-text.js';
+import styles from './change-customer.module.css.js';
+
+const DEFAULT_PAGE_SIZE = 20;
+function ChangeCustomer({ className, data, error, filter = '', isLoading = false, onCustomerSelected, onCustomerSelectionChanged, onFilterChanged, selectedId, }) {
+    const t = useFormattedMessage();
+    const listBoxRef = useRef(null);
+    const hasMoreResults = !isLoading &&
+        data?.pagination &&
+        data.pagination.totalItemCount > DEFAULT_PAGE_SIZE;
+    const listBoxItems = useMemo(() => {
+        const listBoxItems = [...(data?.billTos || [])];
+        if (error instanceof UnauthorizedRequestError) {
+            listBoxItems.push({
+                id: 'message',
+                message: t('You are not authorized to view customers. Please log in or contact support.'),
+                type: 'danger',
+            });
+        }
+        else if (error) {
+            listBoxItems.push({
+                id: 'message',
+                message: t('An error occurred while fetching customers. Please try again later.'),
+                type: 'danger',
+            });
+        }
+        else if (hasMoreResults) {
+            listBoxItems.push({
+                id: 'message',
+                message: t('There are more customers, please refine your search if needed.'),
+                type: 'warning',
+            });
+        }
+        return listBoxItems;
+    }, [data?.billTos, error, hasMoreResults, t]);
+    return (jsxs("div", { className: clsx(styles['change-customer-container'], className), children: [jsx(SearchField, { autoFocus: true, isDebounced: true, "aria-controls": "filtered-customer-results-list", isLoading: isLoading, label: t('Search for a customer'), onChange: onFilterChanged, onKeyUp: ({ key }) => {
+                    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, children: jsx(Message, { type: listBoxItem.type, children: listBoxItem.message }) }, "marker")) : (jsxs(ListBoxItem, { className: styles['list-box-item'], id: 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}` }), selectedId === 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: [
+                                            [listBoxItem.firstName, listBoxItem.lastName].join(' '),
+                                        ]
+                                            .filter(Boolean)
+                                            .join(', ') }) }), jsx("div", { children: jsx(HighlightText, { highlightText: filter, text: [
+                                            listBoxItem.address1,
+                                            listBoxItem.address2,
+                                            listBoxItem.address3,
+                                            listBoxItem.address4,
+                                        ]
+                                            .filter(Boolean)
+                                            .join(', ') }) }), jsx(HighlightText, { highlightText: filter, text: [listBoxItem.postalCode, listBoxItem.country?.name]
+                                        .filter(Boolean)
+                                        .join(', ') })] })] }, listBoxItem.id)) })] }));
+}
+
+export { ChangeCustomer };

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

@@ -0,0 +1,3 @@
+var styles = {"change-customer-container":"change-customer-module-2kOw4","list-box":"change-customer-module-StfiY","list-box-item":"change-customer-module-P7ouY","company-name":"change-customer-module-DSVPN","company-name-text":"change-customer-module-4KQoq","customer-number":"change-customer-module-4p6ab"};
+
+export { styles as default };

package/dist/pages/my-sonic/actions/change-customer/connected-change-customer-dialog.d.ts

@@ -0,0 +1,2 @@
+import { ChangeCustomerDialogProps } from './change-customer-dialog';
+export declare function ConnectedChangeCustomerDialog({ currentlySelectedCustomerId, isOpen, onClose, onCustomerSelected, }: ChangeCustomerDialogProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,39 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { usePatchSession } from '../../../../shared/api/storefront/hooks/authentication/use-patch-session.js';
+import { useFetchBillToAddresses } from '../../../../shared/api/storefront/hooks/customer/use-fetch-bill-to-addresses.js';
+import { ChangeCustomerDialog } from './change-customer-dialog.js';
+
+function ConnectedChangeCustomerDialog({ currentlySelectedCustomerId, isOpen, onClose, onCustomerSelected, }) {
+    const [filter, setFilter] = useState('');
+    const { error: errorMutation, isLoading: isMutating, mutate, } = usePatchSession();
+    const { data, error, isFetching, isLoading } = useFetchBillToAddresses({
+        filter,
+        isEnabled: isOpen,
+    });
+    return (jsx(ChangeCustomerDialog, { currentlySelectedCustomerId: currentlySelectedCustomerId, data: data, error: error, filter: filter, hasErrorSubmitting: Boolean(errorMutation), isLoading: isLoading || isFetching, isOpen: isOpen, isUpdating: isMutating, onClose: onClose, onCustomerSelected: async (id) => {
+            id = `${id}`;
+            try {
+                await mutate({
+                    session: {
+                        billTo: {
+                            id,
+                            isDefault: false,
+                        },
+                        billToId: id,
+                        customerWasUpdated: false,
+                        fulfillmentMethod: 'Ship',
+                        pickUpWarehouse: null,
+                        shipTo: { id },
+                        shipToId: id,
+                    },
+                });
+                onCustomerSelected(id);
+            }
+            catch {
+                // Handle error if needed
+            }
+        }, onFilterChanged: setFilter }));
+}
+
+export { ConnectedChangeCustomerDialog };

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

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

package/dist/pages/{my-account/navigation/connected-my-account-navigation.js → my-sonic/navigation/connected-my-sonic-navigation.js}

@@ -6,10 +6,10 @@ import { useIsBreakpoint } from '../../../shared/hooks/use-is-breakpoint.js';
 import { useLocation } from '../../../shared/routing/use-location.js';
 import { useNavigate } from '../../../shared/routing/use-navigate.js';
 import { PATHS } from '../../paths.js';
-import { MyAccountDesktopNavigation } from './my-account-desktop-navigation.js';
-import { MyAccountMobileNavigation } from './my-account-mobile-navigation.js';
+import { MySonicDesktopNavigation } from './my-sonic-desktop-navigation.js';
+import { MySonicMobileNavigation } from './my-sonic-mobile-navigation.js';
 
-function ConnectedMyAccountNavigation() {
+function ConnectedMySonicNavigation() {
     const isXl = useIsBreakpoint('xl');
     const { pathname } = useLocation();
     const { navigate } = useNavigate();
@@ -21,7 +21,7 @@ function ConnectedMyAccountNavigation() {
             navigate(PATHS.HOME, { reload: true });
         },
     });
-    return (jsx("div", { style: { display: 'grid' }, children: isXl ? (jsx(MyAccountDesktopNavigation, { currentPath: pathname, onLogout: mutate })) : (jsx(MyAccountMobileNavigation, { currentPath: pathname, onLogout: mutate })) }));
+    return (jsx("div", { style: { display: 'grid' }, children: isXl ? (jsx(MySonicDesktopNavigation, { currentPath: pathname, onLogout: mutate })) : (jsx(MySonicMobileNavigation, { currentPath: pathname, onLogout: mutate })) }));
 }
 
-export { ConnectedMyAccountNavigation };
+export { ConnectedMySonicNavigation };

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

@@ -0,0 +1,6 @@
+interface MySonicDesktopNavigationProps {
+    currentPath?: string;
+    onLogout?: VoidFunction;
+}
+export declare function MySonicDesktopNavigation({ currentPath, onLogout, }: MySonicDesktopNavigationProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+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';
+import { mySonicNavigationItems } from './my-sonic-navigation-items.js';
+import styles from './my-sonic-desktop-navigation.module.css.js';
+
+function MySonicDesktopNavigation({ currentPath, onLogout, }) {
+    return (jsx(MenuList, { children: mySonicNavigationItems.map(item => (jsx(MenuListItem, { hasChildren: true, badge: jsx(item.Icon, {}), ...(item.type === 'action'
+                ? item.action === 'logout'
+                    ? { onClick: onLogout }
+                    : {}
+                : {
+                    href: item.path,
+                    isSelected: currentPath?.toLowerCase() === item.path,
+                }), children: jsx("span", { className: styles['menu-list-item'], children: jsx(FormattedMessage, { id: item.label }) }) }, item.label))) }));
+}
+
+export { MySonicDesktopNavigation };

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

@@ -0,0 +1,3 @@
+var styles = {"menu-list-item":"my-sonic-desktop-navigation-module-f8Y3F"};
+
+export { styles as default };

package/dist/pages/{my-account/navigation/my-account-mobile-navigation.d.ts → my-sonic/navigation/my-sonic-mobile-navigation.d.ts}

@@ -1,4 +1,4 @@
-export declare function MyAccountMobileNavigation({ currentPath, onLogout, }: {
+export declare function MySonicMobileNavigation({ currentPath, onLogout, }: {
     currentPath?: string;
     onLogout: () => void;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import { Select } from '../../../forms/select/select.js';
+import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
+import { useNavigate } from '../../../shared/routing/use-navigate.js';
+import { mySonicNavigationItems } from './my-sonic-navigation-items.js';
+
+function MySonicMobileNavigation({ currentPath, onLogout, }) {
+    const { navigate } = useNavigate();
+    const t = useFormattedMessage();
+    return (jsx(Select, { label: t('Navigate to...'), onChange: option => {
+            if (option === 'logout')
+                return onLogout();
+            return navigate(option);
+        }, options: mySonicNavigationItems.reduce((options, item) => ({
+            ...options,
+            ...(item.type === 'link'
+                ? { [item.path]: t(item.label) }
+                : { [item.action]: t(item.label) }),
+        }), {}), selectedOption: currentPath?.toLowerCase() }));
+}
+
+export { MySonicMobileNavigation };

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

@@ -0,0 +1,18 @@
+import { ComponentType } from 'react';
+import { TranslationId } from '../../../intl/translation-id';
+interface MySonicNavigationItemBase {
+    Icon: ComponentType;
+    label: TranslationId;
+    type: 'link' | 'action';
+}
+interface MySonicNavigationLink extends MySonicNavigationItemBase {
+    path: Lowercase<string>;
+    type: 'link';
+}
+interface MySonicNavigationAction extends MySonicNavigationItemBase {
+    action: string;
+    type: 'action';
+}
+type MySonicNavigationItem = MySonicNavigationLink | MySonicNavigationAction;
+export declare const mySonicNavigationItems: MySonicNavigationItem[];
+export {};

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

@@ -0,0 +1,29 @@
+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 { PATHS } from '../../paths.js';
+
+const mySonicNavigationItems = [
+    {
+        Icon: SolidLoginIcon,
+        label: 'Account',
+        path: PATHS.ACCOUNT_SETTINGS.toLowerCase(),
+        type: 'link',
+    },
+    {
+        Icon: SolidFavoriteIcon,
+        label: 'Favorites',
+        path: PATHS.ACCOUNT_MY_LISTS.toLowerCase(),
+        type: 'link',
+    },
+    {
+        Icon: SolidCartIcon,
+        label: 'Orders',
+        path: PATHS.ACCOUNT_ORDERS.toLowerCase(),
+        type: 'link',
+    },
+    { Icon: SolidLogOutIcon, action: 'logout', label: 'Log out', type: 'action' },
+];
+
+export { mySonicNavigationItems };

package/dist/pages/my-sonic/widgets/connected-customer-information-widget.d.ts

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

package/dist/pages/my-sonic/widgets/connected-customer-information-widget.js

@@ -0,0 +1,56 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { Button } from '../../../buttons/button/button.js';
+import { DataCard } from '../../../cards/data-card/data-card.js';
+import { FormattedMessage } from '../../../intl/formatted-message.js';
+import { useFetchBillToAddresses } from '../../../shared/api/storefront/hooks/customer/use-fetch-bill-to-addresses.js';
+import { useFetchCurrentBillToAddress } from '../../../shared/api/storefront/hooks/customer/use-fetch-current-bill-to-address.js';
+import { ConnectedChangeCustomerDialog } from '../actions/change-customer/connected-change-customer-dialog.js';
+
+function ConnectedCustomerInformationWidget() {
+    const [isOpenChangeCustomerDialog, setIsOpenChangeCustomerDialog] = useState(false);
+    const { data: billToAddress, error: fetchBillToAddressError, isLoading: isLoadingFetchCurrentBillToAddress, } = useFetchCurrentBillToAddress();
+    const { data: billToAddresses, error: fetchBillToAddressesError, isLoading: isLoadingFetchBillToAddresses, } = useFetchBillToAddresses();
+    const hasBillToAddresses = Boolean(billToAddresses?.pagination?.totalItemCount);
+    const data = billToAddress
+        ? [
+            {
+                key: 'company-name',
+                label: 'Company name',
+                value: billToAddress.companyName,
+            },
+            {
+                key: 'coc-number',
+                label: 'CoC number',
+                value: billToAddress.properties.cocRegistration,
+            },
+            {
+                key: 'billing',
+                label: 'Billing',
+                value: [
+                    billToAddress.address1,
+                    billToAddress.address2,
+                    billToAddress.address3,
+                    billToAddress.address4,
+                    billToAddress.postalCode,
+                    billToAddress.city,
+                    billToAddress.country?.abbreviation,
+                ]
+                    .filter(Boolean)
+                    .join(', ') || null,
+            },
+        ]
+        : [];
+    function onChangeCustomer() {
+        setIsOpenChangeCustomerDialog(true);
+    }
+    return (jsxs(Fragment, { children: [jsx(DataCard, { actions: hasBillToAddresses
+                    ? [
+                        jsx(Button, { color: "secondary", onClick: onChangeCustomer, size: "sm", variant: "outline", children: jsx(FormattedMessage, { id: "Select other customer" }) }, "edit"),
+                    ]
+                    : undefined, data: data, "data-test-selector": "customer-information-widget", isLoading: isLoadingFetchCurrentBillToAddress || isLoadingFetchBillToAddresses, showError: fetchBillToAddressError || fetchBillToAddressesError, title: "Selected customer" }), hasBillToAddresses && (jsx(ConnectedChangeCustomerDialog, { isOpen: isOpenChangeCustomerDialog, onClose: () => setIsOpenChangeCustomerDialog(false), onCustomerSelected: () => {
+                    window?.location.reload();
+                } }, billToAddress?.id))] }));
+}
+
+export { ConnectedCustomerInformationWidget };

package/dist/pages/product/layouts/product-details-page-layout/product-details-page-layout.d.ts

@@ -2,8 +2,8 @@ interface ProductDetailsPageLayoutProps {
     imageGallery?: React.ReactNode;
     included?: React.ReactNode;
     productInformation?: React.ReactNode;
-    recentlyViewed?: React.ReactNode;
+    recentlyViewedSection?: React.ReactNode;
     usp?: React.ReactNode;
 }
-export declare function ProductDetailsPageLayout({ imageGallery, included, productInformation, recentlyViewed, usp, }: ProductDetailsPageLayoutProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProductDetailsPageLayout({ imageGallery, included, productInformation, recentlyViewedSection, usp, }: ProductDetailsPageLayoutProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,8 +1,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { IntersectionObserverComponent } from '../../../../observers/intersection-observer.js';
 import styles from './product-details-page-layout.module.css.js';
 
-function ProductDetailsPageLayout({ imageGallery, included, productInformation, recentlyViewed, usp, }) {
-    return (jsxs("div", { className: styles['product-details-page-layout'], children: [jsxs("section", { className: styles.top, children: [jsx("div", { className: styles['image-gallery'], children: imageGallery }), jsx("div", { className: styles['product-information'], "data-test-selector": "productInformation", children: productInformation })] }), jsx("section", { className: styles.usp, "data-test-selector": "usp", children: usp }), jsx("section", { className: styles.included, "data-test-selector": "included", children: included }), jsx("section", { className: styles['recently-viewed'], "data-test-selector": "recentlyViewed", children: recentlyViewed })] }));
+function ProductDetailsPageLayout({ imageGallery, included, productInformation, recentlyViewedSection, usp, }) {
+    return (jsxs("div", { className: styles['product-details-page-layout'], children: [jsxs("section", { className: styles.top, children: [jsx("div", { className: styles['image-gallery'], children: imageGallery }), jsx("div", { className: styles['product-information'], "data-test-selector": "productInformation", children: productInformation })] }), usp && (jsx("section", { className: styles.usp, "data-test-selector": "usp", children: usp })), included && (jsx("section", { className: styles.included, "data-test-selector": "included", children: included })), jsx(IntersectionObserverComponent, { isPlaceholder: true, intersectionObserverInit: { rootMargin: '400px' }, children: recentlyViewedSection })] }));
 }
 
 export { ProductDetailsPageLayout };

package/dist/pages/product/layouts/product-details-page-layout/product-details-page-layout.module.css.js

@@ -1,3 +1,3 @@
-var styles = {"product-details-page-layout":"product-details-page-layout-module-pPtZX","top":"product-details-page-layout-module-KCKLZ","image-gallery":"product-details-page-layout-module-0uf92","product-information":"product-details-page-layout-module-3-19O","recently-viewed":"product-details-page-layout-module-Cl9u-","included":"product-details-page-layout-module-lfAgH","usp":"product-details-page-layout-module-e8ZNQ"};
+var styles = {"product-details-page-layout":"product-details-page-layout-module-pPtZX","top":"product-details-page-layout-module-KCKLZ","image-gallery":"product-details-page-layout-module-0uf92","product-information":"product-details-page-layout-module-3-19O","included":"product-details-page-layout-module-lfAgH","usp":"product-details-page-layout-module-e8ZNQ"};
 
 export { styles as default };

package/dist/pages/product/product-details-page/components/product-details-recently-viewed-section/product-details-recently-viewed-section.d.ts

@@ -0,0 +1 @@
+export declare function ProductDetailsRecentlyViewedSection(): import("react/jsx-runtime").JSX.Element | null;

package/dist/pages/product/product-details-page/components/product-details-recently-viewed-section/product-details-recently-viewed-section.js

@@ -0,0 +1,24 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ConnectedProductCard } from '../../../../../cards/product-card/connected-product-card.js';
+import { CardCarousel } from '../../../../../carousel/card-carousel/card-carousel.js';
+import { FormattedMessage } from '../../../../../intl/formatted-message.js';
+import { useCultureCode } from '../../../../../intl/use-culture-code.js';
+import { useFetchRecentlyViewedProducts } from '../../../../../shared/api/bff/hooks/use-fetch-recently-viewed-products.js';
+import { Heading } from '../../../../../typography/heading/heading.js';
+import styles from './product-details-recently-viewed-section.module.css.js';
+
+function ProductDetailsRecentlyViewedSection() {
+    const cultureCode = useCultureCode();
+    const { data: products, isLoading } = useFetchRecentlyViewedProducts({
+        cultureCode,
+    });
+    if (isLoading || !products || products.length === 0)
+        return null;
+    return (jsxs("section", { className: styles['recently-viewed'], "data-test-selector": "recentlyViewed", children: [jsx(Heading, { size: "s", tag: "h2", children: jsx(FormattedMessage, { id: "Recently viewed" }) }), jsx(CardCarousel, { hasOverflow: true, cards: products.map(product => (jsx(ConnectedProductCard, { href: product.href, id: product.productId, image: {
+                        fit: 'contain',
+                        image: product.image,
+                        title: product.image?.altText || product.title,
+                    }, price: product.price, sku: product.sku, tags: product.tags, title: product.title }, product.productId))) })] }));
+}
+
+export { ProductDetailsRecentlyViewedSection };

package/dist/pages/product/product-details-page/components/product-details-recently-viewed-section/product-details-recently-viewed-section.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"recently-viewed":"product-details-recently-viewed-section-module-cGFgH"};
+
+export { styles as default };

package/dist/pages/product/product-details-page/product-details.d.ts

@@ -1,6 +1,5 @@
 import { ProductDetailsPageDataResponse } from '../../../shared/api/bff/model/bff.model';
-export declare function ProductDetails({ data, priceComponent, recentlyViewedComponent, }: {
+export declare function ProductDetails({ data, priceComponent, }: {
     data: ProductDetailsPageDataResponse;
     priceComponent?: React.ReactNode;
-    recentlyViewedComponent?: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -10,10 +10,10 @@ import { Page } from '../../components/page/page.js';
 import { ProductDetailsPageLayout } from '../layouts/product-details-page-layout/product-details-page-layout.js';
 import { ProductDetailImages } from './components/product-details-images/product-detail-images.js';
 import { ProductDetailsPanel } from './components/product-details-panel/product-details-panel.js';
-import { ProductDetailsRecentlyViewed } from './components/product-details-recently-viewed/product-details-recently-viewed.js';
+import { ProductDetailsRecentlyViewedSection } from './components/product-details-recently-viewed-section/product-details-recently-viewed-section.js';
 
-function ProductDetails({ data, priceComponent, recentlyViewedComponent, }) {
-    const { breadCrumb, included, page, product, recentlyViewed, usps } = data;
+function ProductDetails({ data, priceComponent, }) {
+    const { breadCrumb, included, page, product, usps } = data;
     useDataLayer({
         event: {
             event: 'view_item',
@@ -31,8 +31,7 @@ function ProductDetails({ data, priceComponent, recentlyViewedComponent, }) {
                                 fit: 'contain',
                                 image: product.image,
                                 title: product.image?.altText || product.title,
-                            }, price: product.price, sku: product.sku, tags: product.tags, title: product.title }, product.storefrontId))) })] })), productInformation: jsx(ProductDetailsPanel, { priceComponent: priceComponent, product: product }), recentlyViewed: recentlyViewedComponent ||
-                (recentlyViewed.length > 0 && (jsx(ProductDetailsRecentlyViewed, { recentlyViewed: recentlyViewed }))), usp: usps && jsx(ProductUSPCarousel, { usps: usps }) }) }));
+                            }, price: product.price, sku: product.sku, tags: product.tags, title: product.title }, product.storefrontId))) })] })), productInformation: jsx(ProductDetailsPanel, { priceComponent: priceComponent, product: product }), recentlyViewedSection: jsx(ProductDetailsRecentlyViewedSection, {}), usp: usps && usps.length > 0 && jsx(ProductUSPCarousel, { usps: usps }) }) }));
 }
 
 export { ProductDetails };

package/dist/shared/api/bff/hooks/use-fetch-product-details-page-data.js

@@ -1,11 +1,15 @@
-import { useQuery } from '@tanstack/react-query';
+import { useQueryClient, useQuery } from '@tanstack/react-query';
 import { TIME } from '../../../utils/time.js';
 import { fetchProductDetailsPageData } from '../services/bff-service.js';
 
 function useFetchProductDetailsPageData(args) {
+    const queryClient = useQueryClient();
     return useQuery({
         gcTime: 1 * TIME.DAY,
-        queryFn: () => fetchProductDetailsPageData(args),
+        queryFn: () => {
+            queryClient.removeQueries({ queryKey: ['products', 'recently-viewed'] });
+            return fetchProductDetailsPageData(args);
+        },
         queryKey: ['product-details-page-data', args.pageUrl, args.cultureCode],
         staleTime: 1 * TIME.DAY,
     });

package/dist/shared/api/bff/hooks/use-fetch-recently-viewed-products.d.ts

@@ -0,0 +1,4 @@
+import { CultureCode } from '../../../../intl/types';
+export declare function useFetchRecentlyViewedProducts({ cultureCode, }: {
+    cultureCode: CultureCode;
+}): import("@tanstack/react-query").UseQueryResult<import("../model/bff.model").ProductSummary[], Error>;