@sonic-equipment/ui 184.0.0 → 185.0.0

package/dist/modals/recover-password/recover-password-dialog.js

@@ -17,9 +17,7 @@ function RecoverPasswordDialog({ isOpen, onOpenChange, }) {
             reset();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isOpen]);
-    const onSubmit = (event) => {
-        const form = event.currentTarget;
-        const formData = new FormData(form);
+    const onSubmit = ({ formData }) => {
         const email = formData.get('email')?.toString();
         if (!email)
             throw new Error('Email value is required');

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

@@ -7,12 +7,11 @@ 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 { PasswordValidation } from '../../../../forms/password-validation/password-validation.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';
 import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
-import { validatePassword } from '../../../../shared/model/account.js';
 import { validateEmail } from '../../../../shared/model/address.js';
 import { Heading } from '../../../../typography/heading/heading.js';
 import styles from './create-account-form.module.css.js';
@@ -22,8 +21,6 @@ function CreateAccountForm({ errorType, isDisabled: _isDisabled = false, isPendi
     const title = t('create account');
     const isDisabled = isPendingCreateAccount || _isDisabled;
     const [isPrivateAccount, setIsPrivateAccount] = useState(false);
-    const [password, setPassword] = useState('');
-    const [passwordConfirm, setPasswordConfirm] = useState('');
     const [lastName, setLastName] = useState('');
     const [companyName, setCompanyName] = useState('');
     const errorMessages = {
@@ -64,13 +61,6 @@ function CreateAccountForm({ errorType, isDisabled: _isDisabled = false, isPendi
             },
         });
     };
-    const isMismatchingPasswords = () => {
-        if (!passwordConfirm)
-            return;
-        if (passwordConfirm === password)
-            return false;
-        return true;
-    };
     // form header
     const header = (jsx(Heading, { "data-test-selector": "PageTitle", italic: true, size: "m", tag: "h1", uppercase: true, children: title }));
     // form footer
@@ -79,12 +69,7 @@ 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(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(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') }) }) })] }));
+                            } }) }), jsx(PasswordValidation, { isDisabled: isDisabled })] }), 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/create-account-page/create-account-page.js

@@ -1,14 +1,13 @@
 "use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import { Button } from '../../../buttons/button/button.js';
 import { FormattedMessage } from '../../../intl/formatted-message.js';
 import { Dialog } from '../../../modals/dialog/dialog.js';
-import { useCreateAccount } from '../../../shared/api/storefront/hooks/authentication/use-create-account.js';
+import { useCreateAccount } from '../../../shared/api/storefront/hooks/account/use-create-account.js';
 import { useFetchSession } from '../../../shared/api/storefront/hooks/authentication/use-fetch-session.js';
-import { ExistingAccountError } from '../../../shared/api/storefront/services/authentication-service.js';
+import { ExistingAccountError } from '../../../shared/api/storefront/services/account-service.js';
 import { useNavigate } from '../../../shared/routing/use-navigate.js';
-import { Page } from '../../components/page/page.js';
 import { LoadingPage } from '../../loading-page/loading-page.js';
 import { PATHS } from '../../paths.js';
 import { CreateAccountForm } from '../components/create-account-form/create-account-form.js';
@@ -40,7 +39,7 @@ function CreateAccountPage({ returnUrl } = {}) {
         navigate(continuePath, { reload: true });
         return;
     }
-    return (jsxs(Page, { fluid: true, fullHeight: true, "data-test-selector": "createAccountPage", children: [jsx(SignInPageLayout, { fullHeight: true, children: jsx(CreateAccountForm, { errorType: errorType, isDisabled: isDisabled, isPendingCreateAccount: isPendingCreateAccount, onSubmit: onSubmit }) }), jsx(Dialog, { footer: jsx(Button, { color: "primary", href: continuePath, route: { reload: true }, size: "md", withArrow: true, children: jsx(FormattedMessage, { id: "Continue" }) }), hasCloseButton: false, isDismissable: false, isKeyboardDismissDisabled: true, isOpen: isSuccess && !isReturnToShipping, title: "Account created", children: jsx("p", { children: jsx(FormattedMessage, { id: "Your new Sonic Equipment account was succesfully created. You should receive an email soon with further instructions on how to activate this account. If you do not receive this email, please contact Customer Support." }) }) }), jsx(Dialog, { footer: jsx(Button, { color: "primary", href: `${PATHS.SIGN_IN}${returnUrl ? `?returnUrl=${continuePath}` : ''}`, route: { reload: true }, size: "md", withArrow: true, children: jsx(FormattedMessage, { id: "Continue to sign in" }) }), hasCloseButton: false, isDismissable: false, isKeyboardDismissDisabled: true, isOpen: isExistingAccount, title: "Existing account", children: jsx("p", { children: jsx(FormattedMessage, { id: "The email address you entered is already associated with an existing account. Please sign in to this account or contact Customer Support." }) }) })] }));
+    return (jsxs(Fragment, { children: [jsx(SignInPageLayout, { fullHeight: true, children: jsx(CreateAccountForm, { errorType: errorType, isDisabled: isDisabled, isPendingCreateAccount: isPendingCreateAccount, onSubmit: onSubmit }) }), jsx(Dialog, { footer: jsx(Button, { color: "primary", href: continuePath, route: { reload: true }, size: "md", withArrow: true, children: jsx(FormattedMessage, { id: "Continue" }) }), hasCloseButton: false, isDismissable: false, isKeyboardDismissDisabled: true, isOpen: isSuccess && !isReturnToShipping, title: "Account created", children: jsx("p", { children: jsx(FormattedMessage, { id: "Your new Sonic Equipment account was succesfully created. You should receive an email soon with further instructions on how to activate this account. If you do not receive this email, please contact Customer Support." }) }) }), jsx(Dialog, { footer: jsx(Button, { color: "primary", href: `${PATHS.SIGN_IN}${returnUrl ? `?returnUrl=${continuePath}` : ''}`, route: { reload: true }, size: "md", withArrow: true, children: jsx(FormattedMessage, { id: "Continue to sign in" }) }), hasCloseButton: false, isDismissable: false, isKeyboardDismissDisabled: true, isOpen: isExistingAccount, title: "Existing account", children: jsx("p", { children: jsx(FormattedMessage, { id: "The email address you entered is already associated with an existing account. Please sign in to this account or contact Customer Support." }) }) })] }));
 }
 
 export { CreateAccountPage };

package/dist/pages/account/layouts/sign-in-page-layout/sign-in-page-layout.js

@@ -8,7 +8,7 @@ import styles from './sign-in-page-layout.module.css.js';
 
 function SignInPageLayout({ children, fullHeight, image = SIGN_IN_PAGE_BACKGROUND_IMAGE, }) {
     const isLg = useIsBreakpoint('lg');
-    return (jsxs("div", { className: clsx(styles['sign-in-page-layout'], fullHeight && styles['full-height']), children: [jsx("div", { className: styles.main, children: children }), isLg && (jsx("div", { className: styles.side, children: jsx("div", { className: styles.image, children: jsx(Image, { image: image, title: "" }) }) }))] }));
+    return (jsxs("div", { className: clsx(styles['sign-in-page-layout'], fullHeight && styles['full-height']), children: [jsx("section", { className: styles.main, children: children }), isLg && (jsx("div", { className: styles.side, children: jsx("div", { className: styles.image, children: jsx(Image, { image: image, title: "" }) }) }))] }));
 }
 
 export { SignInPageLayout };

package/dist/pages/account/sign-in-page/sign-in-page.js

@@ -2,13 +2,12 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useState, useMemo } from 'react';
 import { RecoverPasswordDialog } from '../../../modals/recover-password/recover-password-dialog.js';
-import { useCreateGuestAccount } from '../../../shared/api/storefront/hooks/authentication/use-create-guest-account.js';
+import { useCreateGuestAccount } from '../../../shared/api/storefront/hooks/account/use-create-guest-account.js';
 import { useFetchSession } from '../../../shared/api/storefront/hooks/authentication/use-fetch-session.js';
 import { useSignIn } from '../../../shared/api/storefront/hooks/authentication/use-sign-in.js';
 import { isRequestError } from '../../../shared/fetch/request.js';
 import { useDisclosure } from '../../../shared/hooks/use-disclosure.js';
 import { useNavigate } from '../../../shared/routing/use-navigate.js';
-import { Page } from '../../components/page/page.js';
 import { PATHS } from '../../paths.js';
 import { SignInForm } from '../components/sign-in-form/sign-in-form.js';
 import { SignInPageLayout } from '../layouts/sign-in-page-layout/sign-in-page-layout.js';
@@ -57,7 +56,7 @@ function SignInPage({ returnUrl } = {}) {
     const onRecoverPasswordDialogOpen = () => {
         setRecoverPasswordDialogOpen(true);
     };
-    return (jsxs(Fragment, { children: [jsx(Page, { fullHeight: true, "data-test-selector": "signInPage", fluid: true, children: jsx(SignInPageLayout, { fullHeight: true, children: jsx(SignInForm, { allowGuestSignIn: allowGuestSignIn, createAccountPath: createAccountPath, errorType: errorType, initialEmail: session?.isGuest ? '' : session?.email, initialRememberMe: session?.rememberMe, isDisabled: !session || isSuccess, isPendingGuestSignIn: isPendingCreateGuest, isPendingUserSignIn: isPendingSignIn, onRecoverPasswordDialogOpen: onRecoverPasswordDialogOpen, onSubmit: onSubmit }) }) }), jsx(RecoverPasswordDialog, { isOpen: isRecoverPasswordDialogOpen, onOpenChange: isOpen => setRecoverPasswordDialogOpen(isOpen) })] }));
+    return (jsxs(Fragment, { children: [jsx(SignInPageLayout, { fullHeight: true, children: jsx(SignInForm, { allowGuestSignIn: allowGuestSignIn, createAccountPath: createAccountPath, errorType: errorType, initialEmail: session?.isGuest ? '' : session?.email, initialRememberMe: session?.rememberMe, isDisabled: !session || isSuccess, isPendingGuestSignIn: isPendingCreateGuest, isPendingUserSignIn: isPendingSignIn, onRecoverPasswordDialogOpen: onRecoverPasswordDialogOpen, onSubmit: onSubmit }) }), jsx(RecoverPasswordDialog, { isOpen: isRecoverPasswordDialogOpen, onOpenChange: isOpen => setRecoverPasswordDialogOpen(isOpen) })] }));
 }
 
 export { SignInPage };

package/dist/pages/checkout/shipping-page/hooks/use-patch-shipping-details.d.ts

@@ -13,4 +13,5 @@ export declare function usePatchShippingDetails(): {
         patchedCart: CartModel | undefined;
         patchedSession: SessionModel | undefined;
     }>;
+    reset: () => void;
 };

package/dist/pages/components/page-container/page-container.js

@@ -4,7 +4,7 @@ import resetStyles from '../../../shared/reset.module.css.js';
 import styles from './page-container.module.css.js';
 
 function PageContainer({ breadcrumbSlot, children, className, 'data-test-selector': dataTestSelector, fluid, fullHeight, titleSlot, }) {
-    return (jsx("div", { className: clsx(styles['page-container'], resetStyles.reset, fullHeight && styles['full-height'], fluid && styles['fluid'], className), "data-test-selector": dataTestSelector, children: jsxs("main", { className: styles['page-main'], children: [breadcrumbSlot && (jsx("div", { className: styles.breadcrumb, children: breadcrumbSlot })), titleSlot && jsx("div", { className: styles.title, children: titleSlot }), jsx("div", { className: styles.content, children: children })] }) }));
+    return (jsx("div", { className: clsx(styles['page-container'], resetStyles.reset, fullHeight && styles['full-height'], fluid && styles['fluid'], className), "data-test-selector": dataTestSelector, children: jsxs("div", { className: styles['page-main'], children: [breadcrumbSlot && (jsx("div", { className: styles.breadcrumb, children: breadcrumbSlot })), titleSlot && jsx("div", { className: styles.title, children: titleSlot }), jsx("div", { className: styles.content, children: children })] }) }));
 }
 
 export { PageContainer };

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

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

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

@@ -8,17 +8,23 @@ 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, }) {
+function ChangeCustomerDialog({ allowSetDefault = false, data, defaultCustomerId, 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 => {
+    const [setAsDefault, setSetAsDefault] = useState(false);
+    if (!isOpen && setAsDefault)
+        setSetAsDefault(false);
+    if (!isOpen)
+        return null;
+    return (jsx(Dialog, { allowSubmit: !hasErrorSubmitting && hasCustomerSelected, className: styles['change-customer-dialog'], isOpen: isOpen, isSubmitting: isUpdating || hasErrorSubmitting, onOpenChange: isOpen => !isOpen && onClose(), onSubmit: () => selectedCustomerId &&
+            onCustomerSelected(selectedCustomerId, setAsDefault), 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, { allowSetDefault: allowSetDefault, className: styles.content, data: data, defaultCustomerId: defaultCustomerId, error: error, filter: filter, isLoading: isLoading, onCustomerSelected: id => {
                 setSelectedCustomerId(id);
-                onCustomerSelected(id);
+                onCustomerSelected(id, setAsDefault);
             }, onCustomerSelectionChanged: id => {
                 setSelectedCustomerId(id);
                 setHasCustomerSelected(true);
-            }, onFilterChanged: onFilterChanged, selectedId: currentlySelectedCustomerId })) }));
+            }, onFilterChanged: onFilterChanged, onSetAsDefaultChange: setSetAsDefault, setAsDefault: setAsDefault })) }));
 }
 
 export { ChangeCustomerDialog };

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

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

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

@@ -1,8 +1,9 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useRef, useMemo } from 'react';
+import { useRef, useState, useCallback, useMemo } from 'react';
 import { ListBox, ListBoxItem, Text } from 'react-aria-components';
 import clsx from 'clsx';
+import { Checkbox } from '../../../../forms/checkbox/checkbox.js';
 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';
@@ -13,13 +14,18 @@ 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, }) {
+function ChangeCustomer({ allowSetDefault = false, className, data, defaultCustomerId, error, filter = '', isLoading = false, onCustomerSelected, onCustomerSelectionChanged: _onCustomerSelectionChanged, onFilterChanged, onSetAsDefaultChange, setAsDefault = false, }) {
     const t = useFormattedMessage();
     const listBoxRef = useRef(null);
     const hasMoreResults = !isLoading &&
         data?.pagination &&
         data.pagination.totalItemCount > DEFAULT_PAGE_SIZE;
-    const listBoxItems = useMemo(() => {
+    const [hasSelectedIdChanged, setHasSelectedIdChanged] = useState(false);
+    const onCustomerSelectionChanged = useCallback((key) => {
+        setHasSelectedIdChanged(true);
+        return _onCustomerSelectionChanged?.(String(key));
+    }, [_onCustomerSelectionChanged]);
+    const [listBoxItems, rerenderKey] = useMemo(() => {
         const listBoxItems = [...(data?.billTos || [])];
         if (error instanceof UnauthorizedRequestError) {
             listBoxItems.push({
@@ -42,13 +48,16 @@ function ChangeCustomer({ className, data, error, filter = '', isLoading = false
                 type: 'warning',
             });
         }
-        return listBoxItems;
-    }, [data?.billTos, error, hasMoreResults, t]);
+        return [
+            listBoxItems,
+            Math.random().toString(36).slice(2, 15) + defaultCustomerId,
+        ];
+    }, [data?.billTos, error, hasMoreResults, t, defaultCustomerId]);
     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: [
+                }, 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: [
                                             [listBoxItem.firstName, listBoxItem.lastName].join(' '),
                                         ]
                                             .filter(Boolean)
@@ -61,7 +70,7 @@ function ChangeCustomer({ className, data, error, filter = '', isLoading = false
                                             .filter(Boolean)
                                             .join(', ') }) }), jsx(HighlightText, { highlightText: filter, text: [listBoxItem.postalCode, listBoxItem.country?.name]
                                         .filter(Boolean)
-                                        .join(', ') })] })] }, listBoxItem.id)) })] }));
+                                        .join(', ') })] })] }, `${listBoxItem.id}-${defaultCustomerId}`)) }, rerenderKey), allowSetDefault && (jsx(Checkbox, { isDisabled: !hasSelectedIdChanged, isSelected: setAsDefault, onChange: onSetAsDefaultChange, value: String(setAsDefault), children: jsx(FormattedMessage, { id: "Make this the default customer" }) }))] }));
 }
 
 export { ChangeCustomer };

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

@@ -1,3 +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"};
+var styles = {"change-customer-container":"change-customer-module-2kOw4","list-box":"change-customer-module-StfiY","list-box-item":"change-customer-module-P7ouY","selected-icon":"change-customer-module-lxmBJ","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

@@ -1,2 +1,7 @@
-import { ChangeCustomerDialogProps } from './change-customer-dialog';
-export declare function ConnectedChangeCustomerDialog({ currentlySelectedCustomerId, isOpen, onClose, onCustomerSelected, }: ChangeCustomerDialogProps): import("react/jsx-runtime").JSX.Element;
+export interface ConnectedChangeCustomerDialogProps {
+    allowSetDefault?: boolean;
+    isOpen: boolean;
+    onClose: () => void;
+    onCustomerSelected: (id: string, setAsDefault: boolean) => void;
+}
+export declare function ConnectedChangeCustomerDialog({ allowSetDefault, isOpen, onClose, onCustomerSelected, }: ConnectedChangeCustomerDialogProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,25 +1,28 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
+import { useFetchCurrentAccount } from '../../../../shared/api/storefront/hooks/account/use-fetch-current-account.js';
 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, }) {
+function ConnectedChangeCustomerDialog({ allowSetDefault = false, isOpen, onClose, onCustomerSelected, }) {
     const [filter, setFilter] = useState('');
-    const { error: errorMutation, isLoading: isMutating, mutate, } = usePatchSession();
+    const { data: account } = useFetchCurrentAccount();
+    const { error: errorMutation, isLoading: isMutating, mutate, reset, } = 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) => {
+    useEffect(() => reset(), [isOpen, reset]);
+    return (jsx(ChangeCustomerDialog, { allowSetDefault: allowSetDefault, data: data, defaultCustomerId: account?.defaultCustomerId || undefined, error: error, filter: filter, hasErrorSubmitting: Boolean(errorMutation), isLoading: isLoading || isFetching, isOpen: isOpen, isUpdating: isMutating, onClose: onClose, onCustomerSelected: async (id, setAsDefault) => {
             id = `${id}`;
             try {
                 await mutate({
                     session: {
                         billTo: {
                             id,
-                            isDefault: false,
+                            isDefault: setAsDefault,
                         },
                         billToId: id,
                         customerWasUpdated: false,
@@ -29,7 +32,7 @@ function ConnectedChangeCustomerDialog({ currentlySelectedCustomerId, isOpen, on
                         shipToId: id,
                     },
                 });
-                onCustomerSelected(id);
+                onCustomerSelected(id, setAsDefault);
             }
             catch {
                 // Handle error if needed

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

@@ -0,0 +1,10 @@
+export interface ChangePasswordDialogProps {
+    error?: Error | null | unknown;
+    isLoading?: boolean;
+    isOpen: boolean;
+    isUpdating?: boolean;
+    onClose: () => void;
+    onPasswordChanged: (currentPassword: string, newPassword: string) => void;
+    username: string | undefined;
+}
+export declare function ChangePasswordDialog({ error, isLoading, isOpen, isUpdating, onClose, onPasswordChanged, username, }: ChangePasswordDialogProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,24 @@
+import { jsx } from 'react/jsx-runtime';
+import { FormSegmentGroup } from '../../../../forms/form/form-segment-group.js';
+import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
+import { Dialog } from '../../../../modals/dialog/dialog.js';
+import { UnauthorizedRequestError } from '../../../../shared/fetch/request.js';
+import { ChangePassword } from './change-password.js';
+
+function ChangePasswordDialog({ error, isLoading = false, isOpen, isUpdating = false, onClose, onPasswordChanged, username, }) {
+    const t = useFormattedMessage();
+    return (jsx(Dialog, { allowSubmit: Boolean(username) &&
+            !isLoading &&
+            !isUpdating &&
+            !(error instanceof UnauthorizedRequestError), isOpen: isOpen, onOpenChange: isOpen => !isOpen && onClose(), onSubmit: ({ formData }) => {
+            const currentPassword = formData.get('current-password')?.toString();
+            const newPassword = formData.get('new-password')?.toString();
+            if (!currentPassword)
+                throw new Error('current password is required');
+            if (!newPassword)
+                throw new Error('New password is required');
+            onPasswordChanged(currentPassword, newPassword);
+        }, title: t('Change password'), children: jsx(FormSegmentGroup, { children: jsx(ChangePassword, { error: error, isLoading: isLoading, isUpdating: isUpdating, username: username }) }) }));
+}
+
+export { ChangePasswordDialog };

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

@@ -0,0 +1,7 @@
+export interface ChangePasswordProps {
+    error?: Error | null | unknown;
+    isLoading?: boolean;
+    isUpdating?: boolean;
+    username: string | undefined;
+}
+export declare function ChangePassword({ error, isLoading, isUpdating, username, }: ChangePasswordProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,35 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { FormSegment } from '../../../../forms/form/form-segment.js';
+import { PasswordField } from '../../../../forms/password-field/password-field.js';
+import { PasswordValidation } from '../../../../forms/password-validation/password-validation.js';
+import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
+import { ProgressCircle } from '../../../../loading/progress-circle.js';
+import { Message } from '../../../../message/message.js';
+import { NonUniquePasswordError, InvalidPasswordError } from '../../../../shared/api/storefront/services/authentication-service.js';
+import { UnauthorizedRequestError } from '../../../../shared/fetch/request.js';
+import { validatePassword } from '../../../../shared/model/account.js';
+import styles from './change-password.module.css.js';
+
+function ChangePassword({ error, isLoading = false, isUpdating = false, username, }) {
+    const t = useFormattedMessage();
+    if (error instanceof UnauthorizedRequestError) {
+        return (jsx(FormSegment, { children: jsx(Message, { type: "danger", children: t('You are not authorized to perform this action') }) }));
+    }
+    if (isLoading) {
+        return (jsx("div", { className: styles['loading-panel'], children: jsx(ProgressCircle, { variant: "gray" }) }));
+    }
+    if (!username) {
+        return jsx(Message, { type: "danger", children: t('An unexpected error occured') });
+    }
+    return (jsxs(Fragment, { children: [jsxs(FormSegment, { children: [jsx("input", { autoComplete: "username", defaultValue: username, id: "username", name: "username", style: { display: 'none' }, type: "text" }), jsx(PasswordField, { autoComplete: "password", "data-test-selector": "current_password", isDisabled: isUpdating, isRequired: true, label: t('Password'), name: "current-password", validate: value => {
+                            if (!value)
+                                return;
+                            return (validatePassword(value) ||
+                                t('Password does not meet requirements'));
+                        } })] }), jsx(PasswordValidation, { isDisabled: isUpdating }), error && (jsx(FormSegment, { children: jsx(Message, { className: styles['error-message'], type: "danger", children: error instanceof NonUniquePasswordError ||
+                        error instanceof InvalidPasswordError
+                        ? t(error.message)
+                        : t('An unexpected error occured') }) }))] }));
+}
+
+export { ChangePassword };

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

@@ -0,0 +1,3 @@
+var styles = {"loading-panel":"change-password-module-hSjXo","error-message":"change-password-module-HyPjt"};
+
+export { styles as default };

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

@@ -0,0 +1,5 @@
+export interface ConnectedChangePasswordDialogProps {
+    isOpen: boolean;
+    onClose: () => void;
+}
+export declare function ConnectedChangePasswordDialog({ isOpen, onClose, }: ConnectedChangePasswordDialogProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,39 @@
+import { jsx } from 'react/jsx-runtime';
+import { FormattedMessage } from '../../../../intl/formatted-message.js';
+import { logger } from '../../../../logging/logger.js';
+import { useFetchCurrentAccount } from '../../../../shared/api/storefront/hooks/account/use-fetch-current-account.js';
+import { usePatchSession } from '../../../../shared/api/storefront/hooks/authentication/use-patch-session.js';
+import { useNavigate } from '../../../../shared/routing/use-navigate.js';
+import { useToast } from '../../../../toast/use-toast.js';
+import { PATHS } from '../../../paths.js';
+import { ChangePasswordDialog } from './change-password-dialog.js';
+
+function ConnectedChangePasswordDialog({ isOpen, onClose, }) {
+    const { error: errorPatchSession, isLoading: isUpdating, mutate: patchSession, } = usePatchSession();
+    const { addToast } = useToast();
+    const { navigate } = useNavigate();
+    const { data: account, error: errorFetchCurrentAccount, isLoading, } = useFetchCurrentAccount({
+        isEnabled: isOpen,
+    });
+    if (!isOpen)
+        return null;
+    return (jsx(ChangePasswordDialog, { error: errorFetchCurrentAccount || errorPatchSession, isLoading: isLoading, isOpen: isOpen, isUpdating: isUpdating, onClose: onClose, onPasswordChanged: async (currentPassword, newPassword) => {
+            logger.info(currentPassword, newPassword);
+            await patchSession({
+                session: {
+                    email: account?.email,
+                    newPassword,
+                    password: currentPassword,
+                },
+            });
+            addToast({
+                body: (jsx(FormattedMessage, { id: "Password changed. Please sign in again." })),
+                isUserDismissable: false,
+                messageType: 'success',
+            });
+            onClose();
+            navigate(`${PATHS.SIGN_IN}${location?.pathname ? `?returnUrl=${encodeURIComponent(location.pathname + location.search)}` : ''}`);
+        }, username: account?.email }));
+}
+
+export { ConnectedChangePasswordDialog };

package/dist/pages/my-sonic/actions/edit-user-info/connected-edit-user-info-dialog.d.ts

@@ -0,0 +1,5 @@
+export interface ConnectedEditUserInfoDialogProps {
+    isOpen: boolean;
+    onClose?: () => void;
+}
+export declare function ConnectedEditUserInfoDialog({ isOpen, onClose, }: ConnectedEditUserInfoDialogProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/pages/my-sonic/actions/edit-user-info/connected-edit-user-info-dialog.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
+import { useFetchCurrentAccount } from '../../../../shared/api/storefront/hooks/account/use-fetch-current-account.js';
+import { usePatchCurrentAccount } from '../../../../shared/api/storefront/hooks/account/use-patch-current-account.js';
+import { ExistingAccountError } from '../../../../shared/api/storefront/services/account-service.js';
+import { EditUserInfoDialog } from './edit-user-info-dialog.js';
+
+function ConnectedEditUserInfoDialog({ isOpen, onClose, }) {
+    const t = useFormattedMessage();
+    const [validationErrors, setValidationErrors] = useState({});
+    const { data: account, error, isLoading, } = useFetchCurrentAccount({
+        isEnabled: isOpen,
+    });
+    const { error: errorPatchCurrentAccount, isLoading: isMutating, mutate, reset, } = usePatchCurrentAccount();
+    useEffect(() => reset(), [isOpen, reset]);
+    if (!isOpen)
+        return null;
+    return (jsx(EditUserInfoDialog, { account: account, error: error || errorPatchCurrentAccount, isLoading: isLoading, isOpen: isOpen, isUpdating: isMutating, onOpenChange: isOpen => !isOpen && onClose?.(), onSubmit: async ({ formData }) => {
+            const email = formData.get('email')?.toString();
+            if (!email)
+                throw new Error('E-mail is required');
+            const lastName = formData.get('lastName')?.toString();
+            if (!lastName)
+                throw new Error('Last name is required');
+            const firstName = formData.get('firstName')?.toString();
+            if (!firstName)
+                throw new Error('First name is required');
+            try {
+                await mutate({
+                    account: {
+                        ...account,
+                        email,
+                        firstName,
+                        lastName,
+                    },
+                });
+                onClose?.();
+            }
+            catch (error) {
+                if (error instanceof ExistingAccountError) {
+                    setValidationErrors(errors => ({
+                        ...errors,
+                        email: t('This email is already in use'),
+                    }));
+                    reset();
+                }
+                else {
+                    throw error;
+                }
+            }
+        }, validationErrors: validationErrors }));
+}
+
+export { ConnectedEditUserInfoDialog };

package/dist/pages/my-sonic/actions/edit-user-info/edit-user-info-dialog.d.ts

@@ -0,0 +1,10 @@
+import { OnSubmitHandler, ValidationErrors } from '../../../../forms/form/form';
+import { EditUserInfoProps } from './edit-user-info';
+export interface EditUserInfoDialogProps extends EditUserInfoProps {
+    isOpen: boolean;
+    isUpdating?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+    onSubmit?: OnSubmitHandler;
+    validationErrors?: ValidationErrors;
+}
+export declare function EditUserInfoDialog({ account, error, isLoading, isOpen, isUpdating, onOpenChange, onSubmit, validationErrors, }: EditUserInfoDialogProps): import("react/jsx-runtime").JSX.Element;

package/dist/pages/my-sonic/actions/edit-user-info/edit-user-info-dialog.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
+import { Dialog } from '../../../../modals/dialog/dialog.js';
+import { UnauthorizedRequestError } from '../../../../shared/fetch/request.js';
+import { EditUserInfo } from './edit-user-info.js';
+
+function EditUserInfoDialog({ account, error, isLoading, isOpen = false, isUpdating = false, onOpenChange, onSubmit, validationErrors, }) {
+    const t = useFormattedMessage();
+    return (jsx(Dialog, { allowSubmit: !isLoading &&
+            !isUpdating &&
+            !(error instanceof UnauthorizedRequestError), isOpen: isOpen, isSubmitting: isUpdating, onOpenChange: onOpenChange, onSubmit: onSubmit, title: t('Edit Sonic account'), validationErrors: validationErrors, children: jsx(EditUserInfo, { account: account, error: error, isLoading: isLoading }) }));
+}
+
+export { EditUserInfoDialog };

package/dist/pages/my-sonic/actions/edit-user-info/edit-user-info.d.ts

@@ -0,0 +1,11 @@
+import { AccountModel } from '../../../../shared/api/storefront/model/storefront.model';
+export interface EditUserInfoProps {
+    account: AccountModel | {
+        email: string;
+        firstName: string;
+        lastName: string;
+    } | undefined;
+    error?: Error | null | unknown;
+    isLoading?: boolean;
+}
+export declare function EditUserInfo({ account, error, isLoading, }: EditUserInfoProps): import("react/jsx-runtime").JSX.Element;