@sonic-equipment/ui 184.0.0 → 186.0.0

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,9 +1,10 @@
 "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 { SearchField } from '../../../../forms/search-field/search-field.js';
+import { Checkbox } from '../../../../forms/elements/checkbox/checkbox.js';
+import { SearchField } from '../../../../forms/fields/search-field/search-field.js';
 import { SolidRatingIcon } from '../../../../icons/solid/solid-rating-icon.js';
 import { FormattedMessage } from '../../../../intl/formatted-message.js';
 import { useFormattedMessage } from '../../../../intl/use-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/layout/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 { PasswordField } from '../../../../forms/fields/password-field/password-field.js';
+import { FormSegment } from '../../../../forms/layout/form/form-segment.js';
+import { PasswordValidation } from '../../../../forms/partials/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-bill-to-address/edit-bill-to-address.d.ts

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

package/dist/pages/my-sonic/actions/edit-bill-to-address/edit-bill-to-address.js

@@ -0,0 +1,8 @@
+import { jsx } from 'react/jsx-runtime';
+import { EditAddressForm } from '../../../../forms/partials/edit-address-form/edit-address-form.js';
+
+function EditBillToAddress() {
+    return (jsx(EditAddressForm, { address: undefined, countries: [], isLoading: false }));
+}
+
+export { EditBillToAddress };

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/layout/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;

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

@@ -0,0 +1,29 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { TextField } from '../../../../forms/fields/text-field/text-field.js';
+import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
+import { ProgressCircle } from '../../../../loading/progress-circle.js';
+import { Message } from '../../../../message/message.js';
+import { UnauthorizedRequestError } from '../../../../shared/fetch/request.js';
+import { validateEmail } from '../../../../shared/model/address.js';
+import styles from './edit-user-info.module.css.js';
+
+function EditUserInfo({ account, error, isLoading = false, }) {
+    const t = useFormattedMessage();
+    if (error instanceof UnauthorizedRequestError) {
+        return (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 (!account) {
+        return jsx(Message, { type: "danger", children: t('An unexpected error occured') });
+    }
+    return (jsxs(Fragment, { children: [jsx(TextField, { autoComplete: "username", "data-test-selector": "email", defaultValue: account.email, inputMode: "email", isRequired: true, label: t('Email'), name: "email", type: "email", validate: value => {
+                    if (!value)
+                        return value;
+                    return validateEmail(value) || t('Please enter a valid email address');
+                } }), jsx(TextField, { "data-test-selector": "firstName", defaultValue: account.firstName, isRequired: true, label: t('First name'), name: "firstName" }), jsx(TextField, { "data-test-selector": "lastName", defaultValue: account.lastName, isRequired: true, label: t('Last name'), name: "lastName" }), error && (jsx(Message, { className: styles['error-message'], type: "danger", children: t('An unexpected error occured') }))] }));
+}
+
+export { EditUserInfo };

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

@@ -0,0 +1,3 @@
+var styles = {"loading-panel":"edit-user-info-module-yQOre","error-message":"edit-user-info-module-2CzVn"};
+
+export { styles as default };

package/dist/pages/my-sonic/layouts/my-sonic-layout/my-sonic-layout-aside.d.ts

@@ -0,0 +1,4 @@
+import { ReactNode } from 'react';
+export declare function MySonicLayoutAside({ children }: {
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/pages/my-sonic/layouts/my-sonic-layout/my-sonic-layout-aside.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import styles from './my-sonic-layout.module.css.js';
+
+function MySonicLayoutAside({ children }) {
+    return jsx("aside", { className: styles.aside, children: children });
+}
+
+export { MySonicLayoutAside };

package/dist/pages/my-sonic/layouts/my-sonic-layout/my-sonic-layout-main.d.ts

@@ -0,0 +1,4 @@
+import { ReactNode } from 'react';
+export declare function MySonicLayoutMain({ children }: {
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/pages/my-sonic/layouts/my-sonic-layout/my-sonic-layout-main.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import styles from './my-sonic-layout.module.css.js';
+
+function MySonicLayoutMain({ children }) {
+    return jsx("main", { className: styles.main, children: children });
+}
+
+export { MySonicLayoutMain };

package/dist/pages/my-sonic/layouts/my-sonic-layout/my-sonic-layout-page.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+export declare function MySonicLayoutPage({ children, title, }: {
+    children?: ReactNode;
+    title: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/pages/my-sonic/layouts/my-sonic-layout/my-sonic-layout-page.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { MySonicLayoutMain } from './my-sonic-layout-main.js';
+import { MySonicLayoutTitle } from './my-sonic-layout-title.js';
+
+function MySonicLayoutPage({ children, title, }) {
+    return (jsxs(Fragment, { children: [jsx(MySonicLayoutTitle, { children: title }), jsx(MySonicLayoutMain, { children: children })] }));
+}
+
+export { MySonicLayoutPage };

package/dist/pages/my-sonic/layouts/my-sonic-layout/my-sonic-layout-pre-aside.d.ts

@@ -0,0 +1,4 @@
+import { ReactNode } from 'react';
+export declare function MySonicLayoutPreAside({ children }: {
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/pages/my-sonic/layouts/my-sonic-layout/my-sonic-layout-pre-aside.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import styles from './my-sonic-layout.module.css.js';
+
+function MySonicLayoutPreAside({ children }) {
+    return jsx("div", { className: styles['pre-aside'], children: children });
+}
+
+export { MySonicLayoutPreAside };

package/dist/pages/my-sonic/layouts/my-sonic-layout/my-sonic-layout-title.d.ts

@@ -0,0 +1,4 @@
+import { ReactNode } from 'react';
+export declare function MySonicLayoutTitle({ children }: {
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/pages/my-sonic/layouts/my-sonic-layout/my-sonic-layout-title.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Heading } from '../../../../typography/heading/heading.js';
+import styles from './my-sonic-layout.module.css.js';
+
+function MySonicLayoutTitle({ children }) {
+    return (jsx(Heading, { italic: true, breakpoints: { lg: 'm' }, className: styles['title'], "data-test-selector": "pageTitle", size: "s", tag: "h1", children: children }));
+}
+
+export { MySonicLayoutTitle };

package/dist/pages/my-sonic/layouts/my-sonic-layout/my-sonic-layout.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+export interface MySonicLayoutProps {
+    children: ReactNode;
+}
+export declare function MySonicLayout({ children }: MySonicLayoutProps): import("react/jsx-runtime").JSX.Element;

package/dist/pages/my-sonic/layouts/my-sonic-layout/my-sonic-layout.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import styles from './my-sonic-layout.module.css.js';
+
+function MySonicLayout({ children }) {
+    return jsx("div", { className: clsx(styles['my-sonic-layout']), children: children });
+}
+
+export { MySonicLayout };

package/dist/pages/my-sonic/layouts/my-sonic-layout/my-sonic-layout.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"my-sonic-layout":"my-sonic-layout-module-ep0n3","title":"my-sonic-layout-module-yMdPQ","main":"my-sonic-layout-module-f0Bhf","pre-aside":"my-sonic-layout-module-6pWHC","aside":"my-sonic-layout-module--OEV-"};
+
+export { styles as default };

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

@@ -1,17 +1,16 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import Cookies from 'js-cookie';
 import { logger } from '../../../logging/logger.js';
 import { useSignOut } from '../../../shared/api/storefront/hooks/authentication/use-sign-out.js';
-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 { MySonicDesktopNavigation } from './my-sonic-desktop-navigation.js';
 import { MySonicMobileNavigation } from './my-sonic-mobile-navigation.js';
+import styles from './connected-my-sonic-navigation.module.css.js';
 
 function ConnectedMySonicNavigation() {
-    const isXl = useIsBreakpoint('xl');
     const { pathname } = useLocation();
     const { navigate } = useNavigate();
     const { mutate } = useSignOut({
@@ -22,7 +21,7 @@ function ConnectedMySonicNavigation() {
             navigate(PATHS.HOME, { reload: true });
         },
     });
-    return (jsx("div", { style: { display: 'grid' }, children: isXl ? (jsx(MySonicDesktopNavigation, { currentPath: pathname, onLogout: mutate })) : (jsx(MySonicMobileNavigation, { currentPath: pathname, onLogout: mutate })) }));
+    return (jsxs("div", { style: { display: 'grid' }, children: [jsx(MySonicDesktopNavigation, { className: styles['large'], currentPath: pathname, onLogout: mutate }), jsx(MySonicMobileNavigation, { className: styles['small'], currentPath: pathname, onLogout: mutate })] }));
 }
 
 export { ConnectedMySonicNavigation };

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

@@ -0,0 +1,3 @@
+var styles = {"small":"connected-my-sonic-navigation-module-2iY0-","large":"connected-my-sonic-navigation-module-MgsX2"};
+
+export { styles as default };

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

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

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

@@ -5,8 +5,8 @@ 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'
+function MySonicDesktopNavigation({ className, currentPath, onLogout, }) {
+    return (jsx(MenuList, { className: className, children: mySonicNavigationItems.map(item => (jsx(MenuListItem, { hasChildren: true, badge: jsx(item.Icon, {}), ...(item.type === 'action'
                 ? item.action === 'logout'
                     ? { onClick: onLogout }
                     : {}