@sonic-equipment/ui 0.0.119 → 1.1.0

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

@@ -0,0 +1,15 @@
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Breadcrumb } from '../../../breadcrumbs/breadcrumb.js';
+import { Heading } from '../../../typography/heading/heading.js';
+import { PageContainer } from '../page-container/page-container.js';
+import { PageMetaData } from '../page-meta-data/page-meta-data.js';
+
+function PageTitle({ children }) {
+    return (jsx(Heading, { italic: true, uppercase: true, breakpoints: { lg: 'm', xxl: 'xl' }, "data-test-selector": "pageTitle", size: "s", tag: "h1", children: children }));
+}
+function Page({ alternateLanguageUrls, breadcrumb, canonicalUrl, children, className, 'data-test-selector': dataTestSelector, fluid, fullHeight, meta, openGraph, title, windowTitle, }) {
+    return (jsxs(Fragment, { children: [jsx(PageMetaData, { alternateLanguageUrls: alternateLanguageUrls, canonicalUrl: canonicalUrl, meta: meta, openGraph: openGraph, windowTitle: windowTitle }), jsx(PageContainer, { breadcrumbSlot: breadcrumb && jsx(Breadcrumb, { links: breadcrumb }), className: className, "data-test-selector": dataTestSelector, fluid: fluid, fullHeight: fullHeight, titleSlot: title && jsx(PageTitle, { children: title }), children: children })] }));
+}
+
+export { Page };

package/dist/pages/components/page-container/page-container.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+export declare function PageContainer({ breadcrumbSlot, children, className, 'data-test-selector': dataTestSelector, fluid, fullHeight, titleSlot, }: {
+    breadcrumbSlot?: ReactNode;
+    children: ReactNode;
+    className?: string;
+    'data-test-selector'?: string;
+    fluid?: boolean;
+    fullHeight?: boolean;
+    titleSlot?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,11 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import clsx from 'clsx';
+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("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/components/page-container/page-container.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"page-container":"page-container-module-eFYSe","page-main":"page-container-module-JkoQY","full-height":"page-container-module-iCrH5","fluid":"page-container-module-glxAS","breadcrumb":"page-container-module-WfQXa","title":"page-container-module-GKN5s","content":"page-container-module-r0SOZ"};
+
+export { styles as default };

package/dist/pages/components/page-meta-data/page-meta-data.d.ts

@@ -0,0 +1,15 @@
+export interface PageMetaDataProps {
+    alternateLanguageUrls?: Record<string, string> | null;
+    canonicalUrl?: string;
+    meta?: {
+        description: string;
+        keywords: string;
+    };
+    openGraph?: {
+        image: string;
+        title: string;
+        url: string;
+    };
+    windowTitle?: string;
+}
+export declare function PageMetaData(props: PageMetaDataProps): null;

package/dist/pages/components/page-meta-data/page-meta-data.js

@@ -0,0 +1,100 @@
+"use client";
+import { environment } from '../../../shared/utils/environment.js';
+
+function addOrUpdateElement(selector, { attributes, tag, }) {
+    const existingElement = document?.querySelector(selector);
+    if (existingElement) {
+        Object.entries(attributes).forEach(([key, value]) => {
+            existingElement.setAttribute(key, value);
+        });
+    }
+    else {
+        const newElement = document?.createElement(tag);
+        if (!newElement)
+            return;
+        Object.entries(attributes).forEach(([key, value]) => {
+            newElement.setAttribute(key, value);
+        });
+        document?.head.append(newElement);
+    }
+}
+function removeElements(selector) {
+    document?.querySelectorAll(selector).forEach(element => element.remove());
+}
+function PageMetaData(props) {
+    if (environment.includes('next'))
+        return null;
+    if (typeof document === 'undefined')
+        return null;
+    if (props.windowTitle) {
+        document.title = props.windowTitle;
+    }
+    if (props.canonicalUrl) {
+        addOrUpdateElement('link[rel="canonical"]', {
+            attributes: { href: props.canonicalUrl, rel: 'canonical' },
+            tag: 'link',
+        });
+    }
+    else {
+        removeElements('link[rel="canonical"]');
+    }
+    if (props.alternateLanguageUrls) {
+        Object.entries(props.alternateLanguageUrls).forEach(([hreflang, url]) => {
+            addOrUpdateElement(`link[rel="alternate"][hreflang="${hreflang}"]`, {
+                attributes: { href: url, hreflang, rel: 'alternate' },
+                tag: 'link',
+            });
+        });
+    }
+    else {
+        removeElements('link[rel="alternate"]');
+    }
+    if (props.meta?.description) {
+        addOrUpdateElement('meta[name="description"]', {
+            attributes: { content: props.meta.description, name: 'description' },
+            tag: 'meta',
+        });
+    }
+    else {
+        removeElements('meta[name="description"]');
+    }
+    if (props.meta?.keywords) {
+        addOrUpdateElement('meta[name="keywords"]', {
+            attributes: { content: props.meta.keywords, name: 'keywords' },
+            tag: 'meta',
+        });
+    }
+    else {
+        removeElements('meta[name="keywords"]');
+    }
+    if (props.openGraph?.title) {
+        addOrUpdateElement('meta[property="og:title"]', {
+            attributes: { content: props.openGraph.title, property: 'og:title' },
+            tag: 'meta',
+        });
+    }
+    else {
+        removeElements('meta[property="og:title"]');
+    }
+    if (props.openGraph?.url) {
+        addOrUpdateElement('meta[property="og:url"]', {
+            attributes: { content: props.openGraph.url, property: 'og:url' },
+            tag: 'meta',
+        });
+    }
+    else {
+        removeElements('meta[property="og:url"]');
+    }
+    if (props.openGraph?.image) {
+        addOrUpdateElement('meta[property="og:image"]', {
+            attributes: { content: props.openGraph.image, property: 'og:image' },
+            tag: 'meta',
+        });
+    }
+    else {
+        removeElements('meta[property="og:image"]');
+    }
+    return null;
+}
+
+export { PageMetaData };

package/dist/pages/countries-page/countries-page.d.ts

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

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

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

package/dist/pages/error-page/error-page.d.ts

@@ -1,4 +1,5 @@
 export interface ErrorPageProps {
     error: Error;
+    title?: string;
 }
-export declare function ErrorPage({ error }: ErrorPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function ErrorPage({ error, title, }: ErrorPageProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,20 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useEffect } from 'react';
+import { logger } from '../../logging/logger.js';
+import { DefaultErrorView } from '../../shared/error/default-error-view.js';
+import { usePaths } from '../../shared/routing/use-paths.js';
+import { Page } from '../components/page/page.js';
+
+function ErrorPage({ error, title = 'Something went wrong', }) {
+    const paths = usePaths();
+    useEffect(() => {
+        logger.error('ErrorPage error:', error);
+    }, [error]);
+    return (jsx(Page, { breadcrumb: [
+            { href: paths.HOME, label: 'Home' },
+            { href: '', label: 'Error' },
+        ], "data-test-selector": "errorPage", title: title, children: jsx(DefaultErrorView, { error: error, title: "" }) }));
+}
+
+export { ErrorPage };

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

@@ -0,0 +1,10 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { BlankPageSpacer } from '../../loading/blank-page-spacer.js';
+import { LoadingOverlay } from '../../loading/loading-overlay.js';
+
+function LoadingPage() {
+    return (jsx(BlankPageSpacer, { children: jsx(LoadingOverlay, {}) }));
+}
+
+export { LoadingPage };

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

@@ -0,0 +1,16 @@
+import { BillToCollectionModel } from '../../../../shared/api/storefront/model/storefront.model';
+export interface ChangeCustomerDialogProps {
+    allowSetDefault?: boolean;
+    data?: BillToCollectionModel;
+    defaultCustomerId?: string;
+    error?: Error | null | unknown;
+    filter?: string;
+    hasErrorSubmitting?: boolean;
+    isLoading?: boolean;
+    isOpen: boolean;
+    isUpdating?: boolean;
+    onClose: () => void;
+    onCustomerSelected: (id: string, setAsDefault: boolean) => void;
+    onFilterChanged?: (filter: string) => void;
+}
+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

@@ -0,0 +1,30 @@
+"use client";
+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({ 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();
+    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, setAsDefault);
+            }, onCustomerSelectionChanged: id => {
+                setSelectedCustomerId(id);
+                setHasCustomerSelected(true);
+            }, onFilterChanged: onFilterChanged, onSetAsDefaultChange: setSetAsDefault, setAsDefault: setAsDefault })) }));
+}
+
+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,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;
+    onSetAsDefaultChange?: (setAsDefault: boolean) => void;
+    setAsDefault?: boolean;
+}
+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

@@ -0,0 +1,76 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState, useCallback, useMemo } from 'react';
+import { ListBox, ListBoxItem, Text } from 'react-aria-components';
+import clsx from 'clsx';
+import { Checkbox } from '../../../../forms/elements/checkbox/checkbox.js';
+import { SearchField } from '../../../../forms/fields/search-field/search-field.js';
+import { Icon } from '../../../../icon/icon.js';
+import { FormattedMessage } from '../../../../intl/formatted-message.js';
+import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
+import { Message } from '../../../../message/message.js';
+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({ 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 [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({
+                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,
+            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, textValue: listBoxItem.id, children: jsx(Message, { type: listBoxItem.type, children: jsx(Text, { slot: "description", children: listBoxItem.message }) }) }, "marker")) : (jsxs(ListBoxItem, { className: styles['list-box-item'], id: listBoxItem.id, textValue: listBoxItem.id, children: [jsxs(Text, { slot: "label", children: [jsxs("div", { className: styles['company-name'], children: [jsx(HighlightText, { className: styles['company-name-text'], highlightText: filter, text: `${listBoxItem.companyName}` }), defaultCustomerId === listBoxItem.id && (jsx(Icon, { className: styles['selected-icon'], name: "StarSolid" }))] }), jsx(HighlightText, { className: styles['customer-number'], highlightText: filter, text: `${listBoxItem.customerNumber}` })] }), jsxs(Text, { slot: "description", children: [jsx("div", { children: jsx(HighlightText, { highlightText: filter, text: [
+                                            [listBoxItem.firstName, listBoxItem.lastName].join(' '),
+                                        ]
+                                            .filter(Boolean)
+                                            .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}-${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

@@ -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","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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,50 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+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 { fetchShipByBillTo } from '../../../../shared/api/storefront/services/customer-service.js';
+import { ChangeCustomerDialog } from './change-customer-dialog.js';
+
+function ConnectedChangeCustomerDialog({ allowSetDefault = false, isOpen, onClose, onCustomerSelected, }) {
+    const [filter, setFilter] = useState('');
+    const { data: account } = useFetchCurrentAccount();
+    const { error: errorMutation, isLoading: isMutating, mutate, reset, } = usePatchSession();
+    const { data, error, isFetching, isLoading } = useFetchBillToAddresses({
+        filter,
+        isEnabled: isOpen,
+    });
+    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}`;
+            const shipToAddress = await fetchShipByBillTo({ billToId: id });
+            const defaultShipTo = shipToAddress.shipTos?.find(shipTo => shipTo.isDefault);
+            const firstShipToWithId = shipToAddress.shipTos?.find(shipTo => shipTo.id !== '');
+            const shipToId = defaultShipTo
+                ? defaultShipTo.id
+                : (firstShipToWithId?.id ?? id);
+            try {
+                await mutate({
+                    session: {
+                        billTo: {
+                            id,
+                            isDefault: setAsDefault,
+                        },
+                        billToId: id,
+                        customerWasUpdated: false,
+                        fulfillmentMethod: 'Ship',
+                        pickUpWarehouse: null,
+                        shipTo: { id: shipToId },
+                        shipToId,
+                    },
+                });
+                onCustomerSelected(id, setAsDefault);
+            }
+            catch {
+                // Handle error if needed
+            }
+        }, onFilterChanged: setFilter }));
+}
+
+export { ConnectedChangeCustomerDialog };

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

@@ -0,0 +1,12 @@
+export interface ChangePasswordDialogProps {
+    allowClose?: boolean;
+    error?: Error | null | unknown;
+    informationalText?: string;
+    isLoading?: boolean;
+    isOpen: boolean;
+    isUpdating?: boolean;
+    onClose: () => void;
+    onPasswordChanged: (currentPassword: string, newPassword: string) => void;
+    userName?: string;
+}
+export declare function ChangePasswordDialog({ allowClose, error, informationalText, 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,25 @@
+"use client";
+import { jsxs, 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';
+import styles from './change-password-dialog.module.css.js';
+
+function ChangePasswordDialog({ allowClose = true, error, informationalText, isLoading = false, isOpen, isUpdating = false, onClose, onPasswordChanged, userName, }) {
+    const t = useFormattedMessage();
+    return (jsxs(Dialog, { allowClose: allowClose, allowSubmit: !isLoading &&
+            !isUpdating &&
+            !(error instanceof UnauthorizedRequestError), hasCloseButton: allowClose, isDismissable: allowClose, isKeyboardDismissDisabled: !allowClose, 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: [informationalText && (jsx("p", { className: styles['informational-text'], children: informationalText })), jsx(FormSegmentGroup, { children: jsx(ChangePassword, { error: error, isDisabled: isUpdating, isLoading: isLoading, userName: userName }) })] }));
+}
+
+export { ChangePasswordDialog };

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

@@ -0,0 +1,3 @@
+var styles = {"informational-text":"change-password-dialog-module-e1njU"};
+
+export { styles as default };

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

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

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

@@ -0,0 +1,28 @@
+"use client";
+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 styles from './change-password.module.css.js';
+
+function ChangePassword({ error, isDisabled = false, isLoading = false, requireCurrentPassword = true, 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" }) }));
+    }
+    // rendering of hidden input with username is to assist browser password managers with complete credentials instead of password only
+    return (jsxs(Fragment, { children: [error && (jsx(FormSegment, { children: jsx(Message, { className: styles['error-message'], type: "danger", children: error instanceof NonUniquePasswordError ||
+                        error instanceof InvalidPasswordError
+                        ? t(error.message, { noTranslationId: true })
+                        : t('An unexpected error occured') }) })), requireCurrentPassword && (jsxs(FormSegment, { children: [userName && (jsx("input", { autoComplete: "username", defaultValue: userName, id: "username", name: "username", style: { display: 'none' }, type: "text" })), jsx(PasswordField, { autoComplete: "current-password", "data-test-selector": "current_password", isDisabled: isDisabled, isRequired: true, label: t('Current password'), name: "current-password" })] })), jsx(PasswordValidation, { isDisabled: isDisabled })] }));
+}
+
+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 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { FormattedMessage } from '../../../../intl/formatted-message.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 { usePaths } from '../../../../shared/routing/use-paths.js';
+import { useToast } from '../../../../toast/use-toast.js';
+import { ChangePasswordDialog } from './change-password-dialog.js';
+
+function ConnectedChangePasswordDialog({ isOpen, onClose, }) {
+    const paths = usePaths();
+    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) => {
+            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/create-ship-to-address/connected-create-ship-to-address-form.d.ts

@@ -0,0 +1,5 @@
+export declare function ConnectedCreateShipToAddressForm({ billToId, makeDefault, returnUrl, }: {
+    billToId: string;
+    makeDefault?: boolean;
+    returnUrl?: string;
+}): import("react/jsx-runtime").JSX.Element;