@sonic-equipment/ui 214.0.0 → 216.0.0

package/dist/intl/types.d.ts

@@ -14,25 +14,37 @@ export interface FormattedMessageOptions {
     optional?: boolean;
     replacementValues?: Record<string, string>;
 }
-export interface FormattedMessageWithKnownTranslationIdProps extends FormattedMessageOptions {
+export interface FormattedMessageOptionsWithKnownTranslationId extends FormattedMessageOptions {
+    noTranslationId?: false;
+}
+export interface FormattedMessageOptionsWithUnkownTranslationId extends FormattedMessageOptions {
+    noTranslationId: true;
+}
+export interface FormattedMessagePropsWithKnownTranslationId extends FormattedMessageOptionsWithKnownTranslationId {
     id: TranslationId;
 }
-export interface FormattedMessageWithUnknownTranslationIdProps extends FormattedMessageOptions {
-    force: true;
+export interface FormattedMessagePropsWithUnknownTranslationId extends FormattedMessageOptionsWithUnkownTranslationId {
     id: string;
+    noTranslationId: true;
+}
+export type FormattedMessageProps = FormattedMessagePropsWithKnownTranslationId | FormattedMessagePropsWithUnknownTranslationId;
+export interface FormattedMessageFunctionWithUnknownTranslationId {
+    (id: string, options: FormattedMessageOptionsWithUnkownTranslationId): string;
+}
+export interface FormattedMessageFunctionWithKnownTranslationId {
+    (id: TranslationId, options?: FormattedMessageOptionsWithKnownTranslationId): string;
 }
-export type FormattedMessageProps = FormattedMessageWithKnownTranslationIdProps | FormattedMessageWithUnknownTranslationIdProps;
 export interface FormattedMessageFunction {
-    (id: TranslationId, options?: {
-        fallbackValue?: string;
-        optional?: boolean;
-        replacementValues?: Record<string, string>;
-    }): string;
-}
-export interface PluralizedFormattedMessageFunction extends FormattedMessageFunction {
-    pluralize: {
-        (translationId: string, count: number): string;
-        (translationIdPrefix: string, translationId: string, count: number): string;
-    };
+    (id: TranslationId, options?: FormattedMessageOptionsWithKnownTranslationId): string;
+    (id: string, options: FormattedMessageOptionsWithUnkownTranslationId): string;
+}
+export interface PluralizeFunction {
+    (translationId: string, count: number): string;
+    (translationIdPrefix: string, translationId: string, count: number): string;
+}
+export interface FormattedMessageFunctionWithPluralisation extends FormattedMessageFunction {
+    pluralize: PluralizeFunction;
 }
+export declare function isFormattedMessageWithUnknownTranslationIdProps(p: FormattedMessageProps): p is FormattedMessagePropsWithUnknownTranslationId;
+export declare function isFormattedMessageWithTranslationIdProps(p: FormattedMessageProps): p is FormattedMessagePropsWithKnownTranslationId;
 export {};

package/dist/intl/types.js

@@ -18,5 +18,11 @@ function isCultureCode(value) {
         return false;
     return /^[a-z]{2}-[A-Z]{2}$/.test(value);
 }
+function isFormattedMessageWithUnknownTranslationIdProps(p) {
+    return Boolean('noTranslationId' in p && p.noTranslationId);
+}
+function isFormattedMessageWithTranslationIdProps(p) {
+    return !('noTranslationId' in p) || !p.noTranslationId;
+}
 
-export { isCountryCode, isCultureCode, isCurrencyCode, isLanguageCode };
+export { isCountryCode, isCultureCode, isCurrencyCode, isFormattedMessageWithTranslationIdProps, isFormattedMessageWithUnknownTranslationIdProps, isLanguageCode };

package/dist/intl/use-formatted-message.d.ts

@@ -1,2 +1,2 @@
-import { PluralizedFormattedMessageFunction } from './types';
-export declare function useFormattedMessage(): PluralizedFormattedMessageFunction;
+import { FormattedMessageFunctionWithPluralisation } from './types';
+export declare function useFormattedMessage(): FormattedMessageFunctionWithPluralisation;

package/dist/intl/use-formatted-message.js

@@ -4,12 +4,12 @@ import { useIntl } from './use-intl.js';
 
 function useFormattedMessage() {
     const { formattedMessage } = useIntl();
-    const formatFunction = (id, options) => formattedMessage(id, options);
-    function pluralize(translationIdOrPrefix, translationIdOrCount, count) {
-        return formatFunction((typeof translationIdOrCount === 'number'
+    const pluralize = (translationIdOrPrefix, translationIdOrCount, count) => {
+        return formattedMessage(typeof translationIdOrCount === 'number'
             ? `${translationIdOrPrefix}.${translationIdOrCount === 1 ? 'singular' : 'plural'}`
-            : `${translationIdOrPrefix}.${translationIdOrCount}.${count === 1 ? 'singular' : 'plural'}`));
-    }
+            : `${translationIdOrPrefix}.${translationIdOrCount}.${count === 1 ? 'singular' : 'plural'}`, { noTranslationId: true });
+    };
+    const formatFunction = (id, options) => formattedMessage(id, options);
     formatFunction.pluralize = pluralize;
     return useCallback(formatFunction, [formattedMessage]);
 }

package/dist/intl/use-intl.js

@@ -3,7 +3,10 @@ import { useContext } from 'react';
 import { IntlContext } from './intl-context.js';
 
 function useIntl() {
-    return useContext(IntlContext);
+    const context = useContext(IntlContext);
+    if (!context)
+        throw new Error('useIntl must be used within an IntlProvider');
+    return context;
 }
 
 export { useIntl };

package/dist/intl/utils.js

@@ -8,7 +8,7 @@ function getLanguageCodeFromCultureCode(cultureCode) {
     return languageCode;
 }
 function spireTranslateAdapter(translate) {
-    return (id, { fallbackValue, optional, replacementValues } = {}) => {
+    return (id, { fallbackValue, optional, replacementValues, } = {}) => {
         const message = translate(id, ...(replacementValues
             ? Object.keys(replacementValues)
                 .map(Number.parseFloat)

package/dist/lists/menu-list/menu-list-provider.d.ts

@@ -3,7 +3,7 @@ export interface MenuListContextValue {
     canCollapse: boolean;
     registerCanCollapse: (canCollapse: boolean) => () => void;
 }
-export declare const MenuListContext: import("react").Context<MenuListContextValue | undefined>;
+export declare const MenuListContext: React.Context<MenuListContextValue | undefined>;
 export declare function MenuListProvider({ children, }: {
     children: ReactNode | ((args: {
         canCollapse: boolean;

package/dist/modals/confirmation/confirmation-dialog.d.ts

@@ -1,10 +1,11 @@
+import { TranslationId } from 'intl/translation-id';
 interface ConfirmationDialogProps {
-    cancelLabel?: string;
+    cancelLabel?: TranslationId;
     'data-test-selector'?: string;
     isOpen: boolean;
     onCancel: VoidFunction;
     onConfirm: VoidFunction;
-    submitLabel?: string;
+    submitLabel?: TranslationId;
     title: string;
 }
 export declare function ConfirmationDialog({ cancelLabel, 'data-test-selector': dataTestSelector, isOpen, onCancel, onConfirm, submitLabel, title, }: ConfirmationDialogProps): import("react/jsx-runtime").JSX.Element;

package/dist/modals/dialog/dialog.js

@@ -13,7 +13,7 @@ import { Modal } from '../modal/modal.js';
 import styles from './dialog.module.css.js';
 
 function Footer({ allowSubmit = true, cancelLabel, close, isSubmitting, submitLabel, }) {
-    return (jsxs(Fragment, { children: [jsx(Button, { withArrow: true, color: "primary", "data-test-selector": "dialogSubmit", isDisabled: !allowSubmit, isLoading: isSubmitting ? jsx(FormattedMessage, { id: "Submitting\u2026" }) : undefined, size: "md", type: "submit", children: jsx(FormattedMessage, { id: submitLabel }) }), jsx(Button, { color: "secondary", "data-test-selector": "dialogCancel", onClick: close, size: "md", variant: "outline", children: jsx(FormattedMessage, { id: cancelLabel }) })] }));
+    return (jsxs(Fragment, { children: [jsx(Button, { withArrow: true, color: "primary", "data-test-selector": "dialogSubmit", isDisabled: !allowSubmit, isLoading: isSubmitting ? jsx(FormattedMessage, { id: "Submitting\u2026" }) : undefined, size: "md", type: "submit", children: jsx(FormattedMessage, { noTranslationId: true, id: submitLabel }) }), jsx(Button, { color: "secondary", "data-test-selector": "dialogCancel", onClick: close, size: "md", variant: "outline", children: jsx(FormattedMessage, { noTranslationId: true, id: cancelLabel }) })] }));
 }
 function Dialog({ allowClose = true, allowSubmit = true, cancelLabel = 'Close', children, className, 'data-test-selector': dataTestSelector = 'dialog', footer = Footer, hasCloseButton = true, hideTitle, isDismissable, isFullScreen, isKeyboardDismissDisabled, isOpen, isSubmitting = false, onOpenChange, onSubmit, shouldCloseOnInteractOutside, submitLabel = 'Submit', title, validationErrors, }) {
     const t = useFormattedMessage();

package/dist/notifications/announcements/announcement.d.ts

@@ -4,4 +4,4 @@ export interface AnnouncementProps {
     className?: string;
     onDismiss?: (id: string) => void;
 }
-export declare const Announcement: import("react").ForwardRefExoticComponent<AnnouncementProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Announcement: React.ForwardRefExoticComponent<AnnouncementProps & React.RefAttributes<HTMLDivElement>>;

package/dist/observers/intersection-observer.js

@@ -16,7 +16,7 @@ function IntersectionObserverComponent({ children, intersectionObserverInit, isD
         return children;
     if (isIntersecting && isPlaceholder)
         return children;
-    return (jsxs("div", { "data-intersecting": isIntersecting, style: { display: 'contents' }, children: [jsx("div", { ref: topRef, "aria-hidden": true, "data-role": "top of intersection observer" }), isIntersecting && children, jsx("div", { ref: bottomRef, "aria-hidden": true, "data-role": "bottom of intersection observer" })] }));
+    return (jsxs("div", { "data-intersecting": isIntersecting, style: { display: 'contents' }, children: [jsx("div", { ref: topRef, "aria-hidden": "true", "data-role": "top of intersection observer" }), isIntersecting && children, jsx("div", { ref: bottomRef, "aria-hidden": "true", "data-role": "bottom of intersection observer" })] }));
 }
 
 export { IntersectionObserverComponent };

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

@@ -29,7 +29,7 @@ function ChangePassword({ error, isLoading = false, isUpdating = false, username
                                 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(error.message, { noTranslationId: true })
                         : t('An unexpected error occured') }) }))] }));
 }
 

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

@@ -89,7 +89,7 @@ function ConnectedEditBillToAddressForm({ billToId, returnUrl, }) {
                     postalCode: formData.get('postalCode')?.toString() || '',
                 },
             });
-        }, children: [jsx(AddressForm, { address: billToAddress, countries: countries, currentCountry: currentCountry, isReadonly: isReadonly }), isSuccess && !isPatching && (jsx("div", { className: styles.info, children: jsx(Message, { type: "info", children: jsx(FormattedMessage, { id: "Saved" }) }) })), jsxs("div", { className: styles.actions, children: [returnUrl && (jsx(Button, { color: "secondary", isDisabled: isPatching, onClick: () => navigate(returnUrl), variant: "outline", children: jsx(FormattedMessage, { id: "Back" }) })), !isReadonly && (jsx(Button, { isLoading: isPatching ? jsx(FormattedMessage, { id: "Saving" }) : undefined, type: "submit", children: jsx(FormattedMessage, { id: "Save" }) }))] })] }));
+        }, children: [jsx(AddressForm, { address: billToAddress, countries: countries, currentCountry: currentCountry, isReadonly: isReadonly }), isSuccess && !isPatching && (jsx("div", { className: styles.info, children: jsx(Message, { type: "success", children: jsx(FormattedMessage, { id: "Saved" }) }) })), jsxs("div", { className: styles.actions, children: [returnUrl && (jsx(Button, { color: "secondary", isDisabled: isPatching, onClick: () => navigate(returnUrl), variant: "outline", children: jsx(FormattedMessage, { id: "Back" }) })), !isReadonly && (jsx(Button, { isLoading: isPatching ? jsx(FormattedMessage, { id: "Saving" }) : undefined, type: "submit", children: jsx(FormattedMessage, { id: "Save" }) }))] })] }));
 }
 
 export { ConnectedEditBillToAddressForm };

package/dist/pages/my-sonic/actions/edit-ship-to-address/connected-edit-ship-to-address-form.js

@@ -121,7 +121,7 @@ function ConnectedEditShipToAddressForm({ billToId, returnUrl, shipToId, }) {
                     },
                 });
             }
-        }, children: [jsx(AddressForm, { address: shipToAddress, countries: countries, currentCountry: currentCountry, isLoading: isPatching, isReadonly: isReadonly || isPatching }), shipToAddress.id !== 'current' && (jsx(Checkbox, { defaultSelected: shipToAddress.isDefault, isDisabled: isReadonly || isPatching, name: "setAsDefault", value: "TRUE", children: jsx(FormattedMessage, { id: "Make this the default ship to address" }) })), isSuccess && !isPatching && (jsx("div", { className: styles.info, children: jsx(Message, { type: "info", children: jsx(FormattedMessage, { id: "Saved" }) }) })), jsxs("div", { className: styles.actions, children: [returnUrl && (jsx(Button, { color: "secondary", isDisabled: isPatching, onClick: () => navigate(returnUrl), variant: "outline", children: jsx(FormattedMessage, { id: "Back" }) })), !isReadonly && (jsx(Button, { isLoading: isPatching ? jsx(FormattedMessage, { id: "Saving" }) : undefined, type: "submit", children: jsx(FormattedMessage, { id: "Save" }) }))] })] }));
+        }, children: [jsx(AddressForm, { address: shipToAddress, countries: countries, currentCountry: currentCountry, isLoading: isPatching, isReadonly: isReadonly || isPatching }), shipToAddress.id !== 'current' && (jsx(Checkbox, { defaultSelected: shipToAddress.isDefault, isDisabled: isReadonly || isPatching, name: "setAsDefault", value: "TRUE", children: jsx(FormattedMessage, { id: "Make this the default ship to address" }) })), isSuccess && !isPatching && (jsx("div", { className: styles.info, children: jsx(Message, { type: "success", children: jsx(FormattedMessage, { id: "Saved" }) }) })), jsxs("div", { className: styles.actions, children: [returnUrl && (jsx(Button, { color: "secondary", isDisabled: isPatching, onClick: () => navigate(returnUrl), variant: "outline", children: jsx(FormattedMessage, { id: "Back" }) })), !isReadonly && (jsx(Button, { isLoading: isPatching ? jsx(FormattedMessage, { id: "Saving" }) : undefined, type: "submit", children: jsx(FormattedMessage, { id: "Save" }) }))] })] }));
 }
 
 export { ConnectedEditShipToAddressForm };

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

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

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

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

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

@@ -1,3 +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-"};
+var styles = {"my-sonic-layout":"my-sonic-layout-module-ep0n3","breadcrumb":"my-sonic-layout-module-QsEQM","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

@@ -12,7 +12,7 @@ import styles from './connected-my-sonic-navigation.module.css.js';
 
 function ConnectedMySonicNavigation() {
     const paths = usePaths();
-    const { pathname } = useLocation();
+    const { fullPathname } = useLocation();
     const { navigate } = useNavigate();
     const { mutate } = useSignOut({
         onError: logger.error,
@@ -22,7 +22,7 @@ function ConnectedMySonicNavigation() {
             navigate(paths.HOME, { reload: true });
         },
     });
-    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 })] }));
+    return (jsxs("div", { style: { display: 'grid' }, children: [jsx(MySonicDesktopNavigation, { className: styles['large'], currentPath: fullPathname, onLogout: mutate }), jsx(MySonicMobileNavigation, { className: styles['small'], currentPath: fullPathname, onLogout: mutate })] }));
 }
 
 export { ConnectedMySonicNavigation };

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

@@ -3,18 +3,20 @@ import { jsx } from 'react/jsx-runtime';
 import { FormattedMessage } from '../../../intl/formatted-message.js';
 import { MenuList } from '../../../lists/menu-list/menu-list.js';
 import { MenuListItem } from '../../../lists/menu-list/menu-list-item.js';
+import { useLocation } from '../../../shared/routing/use-location.js';
 import { useMySonicNavigationItems } from './my-sonic-navigation-items.js';
 import styles from './my-sonic-desktop-navigation.module.css.js';
 
 function MySonicDesktopNavigation({ className, currentPath, onLogout, }) {
     const mySonicNavigationItems = useMySonicNavigationItems();
+    const { basePathname } = useLocation();
     return (jsx(MenuList, { collapsible: true, className: className, children: mySonicNavigationItems.map(item => (jsx(MenuListItem, { badge: jsx(item.Icon, {}), ...(item.type === 'action'
                 ? item.action === 'logout'
                     ? { onClick: onLogout }
                     : {}
                 : {
                     href: item.path,
-                    isSelected: currentPath?.toLowerCase() === item.path,
+                    isSelected: currentPath === `${basePathname}${item.path}`,
                 }), children: jsx("span", { className: styles['menu-list-item'], children: jsx(FormattedMessage, { id: item.label }) }) }, item.label))) }));
 }
 

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

@@ -2,11 +2,13 @@
 import { jsx } from 'react/jsx-runtime';
 import { Select } from '../../../forms/elements/select/select.js';
 import { useFormattedMessage } from '../../../intl/use-formatted-message.js';
+import { useLocation } from '../../../shared/routing/use-location.js';
 import { useNavigate } from '../../../shared/routing/use-navigate.js';
 import { useMySonicNavigationItems } from './my-sonic-navigation-items.js';
 
 function MySonicMobileNavigation({ className, currentPath, onLogout, }) {
     const mySonicNavigationItems = useMySonicNavigationItems();
+    const { basePathname } = useLocation();
     const { navigate } = useNavigate();
     const t = useFormattedMessage();
     return (jsx(Select, { className: className, label: t('Navigate to...'), onChange: option => {
@@ -16,9 +18,9 @@ function MySonicMobileNavigation({ className, currentPath, onLogout, }) {
         }, options: mySonicNavigationItems.reduce((options, item) => ({
             ...options,
             ...(item.type === 'link'
-                ? { [item.path]: t(item.label) }
+                ? { [`${basePathname}${item.path}`]: t(item.label) }
                 : { [item.action]: t(item.label) }),
-        }), {}), selectedOption: currentPath?.toLowerCase() }));
+        }), {}), selectedOption: currentPath }));
 }
 
 export { MySonicMobileNavigation };

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

@@ -6,7 +6,7 @@ interface MySonicNavigationItemBase {
     type: 'link' | 'action';
 }
 interface MySonicNavigationLink extends MySonicNavigationItemBase {
-    path: Lowercase<string>;
+    path: string;
     type: 'link';
 }
 interface MySonicNavigationAction extends MySonicNavigationItemBase {

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

@@ -11,19 +11,19 @@ function useMySonicNavigationItems() {
         {
             Icon: SolidLoginIcon,
             label: 'Account',
-            path: paths.ACCOUNT_SETTINGS.toLowerCase(),
+            path: paths.ACCOUNT,
             type: 'link',
         },
         {
             Icon: SolidFavoriteIcon,
             label: 'Favorites',
-            path: paths.ACCOUNT_MY_LISTS.toLowerCase(),
+            path: paths.ACCOUNT_MY_LISTS,
             type: 'link',
         },
         {
             Icon: SolidCartIcon,
             label: 'Orders',
-            path: paths.ACCOUNT_ORDERS.toLowerCase(),
+            path: paths.ACCOUNT_ORDERS,
             type: 'link',
         },
         {

package/dist/pages/my-sonic/pages/create-ship-to-address-details-page/create-ship-to-address-details-page.d.ts

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

package/dist/pages/my-sonic/pages/create-ship-to-address-details-page/create-ship-to-address-details-page.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Breadcrumb } from '../../../../breadcrumbs/breadcrumb.js';
+import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
+import { usePaths } from '../../../../shared/routing/use-paths.js';
+import { ConnectedCreateShipToAddressForm } from '../../actions/create-ship-to-address/connected-create-ship-to-address-form.js';
+import { MySonicLayoutBreadcrumb } from '../../layouts/my-sonic-layout/my-sonic-layout-breadcrumb.js';
+import { MySonicLayoutPage } from '../../layouts/my-sonic-layout/my-sonic-layout-page.js';
+
+function CreateShipToAddressDetailsPage({ billToId, returnUrl, }) {
+    const t = useFormattedMessage();
+    const paths = usePaths();
+    return (jsx(MySonicLayoutPage, { title: t('Shipping address'), children: jsx(ConnectedCreateShipToAddressForm, { billToId: billToId, returnUrl: returnUrl || paths.ACCOUNT }) }));
+}
+function CreateShipToAddressDetailsPageBreadcrumb({ billToId, }) {
+    const t = useFormattedMessage();
+    const paths = usePaths();
+    return (jsx(MySonicLayoutBreadcrumb, { children: jsx(Breadcrumb, { links: [
+                { href: paths.HOME, label: t('Home') },
+                { href: paths.MY_SONIC, label: t('My Sonic') },
+                { href: paths.ACCOUNT, label: t('Account') },
+                {
+                    href: `${paths.ACCOUNT_EDIT_BILL_TO_ADDRESS}/${billToId}${paths.ACCOUNT_EDIT_SHIP_TO_ADDRESS}/new`,
+                    label: t('Shipping address'),
+                },
+            ] }) }));
+}
+
+export { CreateShipToAddressDetailsPage, CreateShipToAddressDetailsPageBreadcrumb };

package/dist/pages/my-sonic/pages/edit-bill-to-address-details-page/edit-bill-to-address-details-page.d.ts

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

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

@@ -0,0 +1,29 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Breadcrumb } from '../../../../breadcrumbs/breadcrumb.js';
+import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
+import { usePaths } from '../../../../shared/routing/use-paths.js';
+import { ConnectedEditBillToAddressForm } from '../../actions/edit-bill-to-address/connected-edit-bill-to-address-form.js';
+import { MySonicLayoutBreadcrumb } from '../../layouts/my-sonic-layout/my-sonic-layout-breadcrumb.js';
+import { MySonicLayoutPage } from '../../layouts/my-sonic-layout/my-sonic-layout-page.js';
+
+function EditBillToAddressDetailsPage({ billToId, returnUrl, }) {
+    const t = useFormattedMessage();
+    const paths = usePaths();
+    return (jsx(MySonicLayoutPage, { title: t('Billing address'), children: jsx(ConnectedEditBillToAddressForm, { billToId: billToId, returnUrl: returnUrl || paths.ACCOUNT }) }));
+}
+function EditBillToAddressDetailsPageBreadcrumb({ billToId, }) {
+    const t = useFormattedMessage();
+    const paths = usePaths();
+    return (jsx(MySonicLayoutBreadcrumb, { children: jsx(Breadcrumb, { links: [
+                { href: paths.HOME, label: t('Home') },
+                { href: paths.MY_SONIC, label: t('My Sonic') },
+                { href: paths.ACCOUNT, label: t('Account') },
+                {
+                    href: `${paths.ACCOUNT_EDIT_BILL_TO_ADDRESS}/${billToId}`,
+                    label: t('Billing address'),
+                },
+            ] }) }));
+}
+
+export { EditBillToAddressDetailsPage, EditBillToAddressDetailsPageBreadcrumb };

package/dist/pages/my-sonic/pages/edit-ship-to-address-details-page/edit-ship-to-address-details-page.d.ts

@@ -0,0 +1,9 @@
+export declare function EditShipToAddressDetailsPage({ billToId, returnUrl, shipToId, }: {
+    billToId: string;
+    returnUrl?: string;
+    shipToId: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function EditShipToAddressDetailsPageBreadcrumb({ billToId, shipToId, }: {
+    billToId: string;
+    shipToId: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/pages/my-sonic/pages/edit-ship-to-address-details-page/edit-ship-to-address-details-page.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Breadcrumb } from '../../../../breadcrumbs/breadcrumb.js';
+import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
+import { usePaths } from '../../../../shared/routing/use-paths.js';
+import { ConnectedEditShipToAddressForm } from '../../actions/edit-ship-to-address/connected-edit-ship-to-address-form.js';
+import { MySonicLayoutBreadcrumb } from '../../layouts/my-sonic-layout/my-sonic-layout-breadcrumb.js';
+import { MySonicLayoutPage } from '../../layouts/my-sonic-layout/my-sonic-layout-page.js';
+
+function EditShipToAddressDetailsPage({ billToId, returnUrl, shipToId, }) {
+    const t = useFormattedMessage();
+    const paths = usePaths();
+    return (jsx(MySonicLayoutPage, { title: t('Shipping address'), children: jsx(ConnectedEditShipToAddressForm, { billToId: billToId, returnUrl: returnUrl || paths.ACCOUNT, shipToId: shipToId }) }));
+}
+function EditShipToAddressDetailsPageBreadcrumb({ billToId, shipToId, }) {
+    const t = useFormattedMessage();
+    const paths = usePaths();
+    return (jsx(MySonicLayoutBreadcrumb, { children: jsx(Breadcrumb, { links: [
+                { href: paths.HOME, label: t('Home') },
+                { href: paths.MY_SONIC, label: t('My Sonic') },
+                { href: paths.ACCOUNT, label: t('Account') },
+                {
+                    href: `${paths.ACCOUNT_EDIT_BILL_TO_ADDRESS}/${billToId}${paths.ACCOUNT_EDIT_SHIP_TO_ADDRESS}/${shipToId}`,
+                    label: t('Shipping address'),
+                },
+            ] }) }));
+}
+
+export { EditShipToAddressDetailsPage, EditShipToAddressDetailsPageBreadcrumb };

package/dist/pages/my-sonic/pages/favorites/favorites-page.d.ts

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

package/dist/pages/my-sonic/pages/favorites/favorites-page.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Breadcrumb } from '../../../../breadcrumbs/breadcrumb.js';
+import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
+import { usePaths } from '../../../../shared/routing/use-paths.js';
+import { MySonicLayoutBreadcrumb } from '../../layouts/my-sonic-layout/my-sonic-layout-breadcrumb.js';
+import { MySonicLayoutPage } from '../../layouts/my-sonic-layout/my-sonic-layout-page.js';
+
+function FavoritesPage() {
+    const t = useFormattedMessage();
+    return (jsx(MySonicLayoutPage, { title: t('Favorites'), children: "Not implemented yet" }));
+}
+function FavoritesPageBreadcrumb() {
+    const t = useFormattedMessage();
+    const paths = usePaths();
+    return (jsx(MySonicLayoutBreadcrumb, { children: jsx(Breadcrumb, { links: [
+                { href: paths.HOME, label: t('Home') },
+                { href: paths.MY_SONIC, label: t('My Sonic') },
+                { href: paths.ACCOUNT_MY_LISTS, label: t('Favorites') },
+            ] }) }));
+}
+
+export { FavoritesPage, FavoritesPageBreadcrumb };

package/dist/pages/my-sonic/pages/my-account/my-account-page.d.ts

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

package/dist/pages/my-sonic/pages/my-account/my-account-page.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Breadcrumb } from '../../../../breadcrumbs/breadcrumb.js';
+import { useFormattedMessage } from '../../../../intl/use-formatted-message.js';
+import { Widget } from '../../../../lists/widget-grid/widget.js';
+import { WidgetGrid } from '../../../../lists/widget-grid/widget-grid.js';
+import { usePaths } from '../../../../shared/routing/use-paths.js';
+import { MySonicLayoutBreadcrumb } from '../../layouts/my-sonic-layout/my-sonic-layout-breadcrumb.js';
+import { MySonicLayoutPage } from '../../layouts/my-sonic-layout/my-sonic-layout-page.js';
+import { ConnectedAddressBookWidget } from '../../widgets/connected-address-book-widget.js';
+import { ConnectedBillToAddressWidget } from '../../widgets/connected-bill-to-address-widget.js';
+import { ConnectedCustomerInformationWidget } from '../../widgets/connected-customer-information-widget.js';
+import { ConnectedShipToAddressWidget } from '../../widgets/connected-ship-to-address-widget.js';
+import { ConnectedUserAccountWidget } from '../../widgets/connected-user-account-widget.js';
+
+function MyAccountPage() {
+    const t = useFormattedMessage();
+    return (jsx(MySonicLayoutPage, { title: t('My account'), children: jsxs(WidgetGrid, { children: [jsx(Widget, { children: jsx(ConnectedUserAccountWidget, {}) }), jsx(Widget, { children: jsx(ConnectedCustomerInformationWidget, {}) }), jsx(Widget, { children: jsx(ConnectedBillToAddressWidget, {}) }), jsx(Widget, { children: jsx(ConnectedShipToAddressWidget, {}) }), jsx(Widget, { size: "full", children: jsx(ConnectedAddressBookWidget, {}) })] }) }));
+}
+function MyAccountPageBreadcrumb() {
+    const t = useFormattedMessage();
+    const paths = usePaths();
+    return (jsx(MySonicLayoutBreadcrumb, { children: jsx(Breadcrumb, { links: [
+                { href: paths.HOME, label: t('Home') },
+                { href: paths.MY_SONIC, label: t('My Sonic') },
+                { href: paths.ACCOUNT, label: t('Account') },
+            ] }) }));
+}
+
+export { MyAccountPage, MyAccountPageBreadcrumb };

package/dist/pages/my-sonic/pages/order-details/order-details-content.d.ts

@@ -0,0 +1,8 @@
+import { OrderModel } from '../../../../shared/api/storefront/model/storefront.model';
+import { StatusType } from '../../../../text/status-text/status-text';
+export type OrderDetailsContentProps = {
+    order: OrderModel;
+    returnUrl?: string;
+};
+export declare const statusMap: Partial<Record<OrderModel['status'], StatusType>>;
+export declare function OrderDetailsContent({ order, returnUrl, }: OrderDetailsContentProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,69 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Button } from '../../../../buttons/button/button.js';
+import { PrintButton } from '../../../../buttons/print-button/print-button.js';
+import { OrderLineCard } from '../../../../cards/orderline-card/orderline-card.js';
+import { CartTotals } from '../../../../cart-totals/cart-totals.js';
+import { FormattedDate } from '../../../../intl/formatted-date.js';
+import { FormattedMessage } from '../../../../intl/formatted-message.js';
+import { OrderLineList } from '../../../../lists/orderline-list/orderline-list.js';
+import { usePaths } from '../../../../shared/routing/use-paths.js';
+import { ensureNumber } from '../../../../shared/utils/number.js';
+import { StatusText } from '../../../../text/status-text/status-text.js';
+import { Heading } from '../../../../typography/heading/heading.js';
+import { BillingAndInvoiceInformation } from '../../../checkout/components/billing-and-invoice-information.js';
+import styles from './order-details-content.module.css.js';
+
+const statusMap = {
+    Cancelled: 'critical',
+    Fulfilled: 'success',
+    Saved: 'success',
+};
+const getOrderBillToAddress = (order) => ({
+    address1: order.btAddress1,
+    address2: order.btAddress2,
+    address3: order.btAddress3,
+    attention: '',
+    city: order.billToCity,
+    companyName: order.btCompanyName,
+    country: order.btCountry,
+    email: '',
+    firstName: '',
+    lastName: '',
+    phone: '',
+    postalCode: order.billToPostalCode,
+});
+const getOrderShipToAddress = (order) => ({
+    address1: order.stAddress1,
+    address2: order.stAddress2,
+    address3: order.stAddress3,
+    attention: '',
+    city: order.shipToCity,
+    companyName: order.stCompanyName,
+    country: order.stCountry,
+    email: '',
+    firstName: '',
+    lastName: '',
+    phone: '',
+    postalCode: order.shipToPostalCode,
+});
+function OrderDetailsContent({ order, returnUrl, }) {
+    const paths = usePaths();
+    const status = statusMap[order.status];
+    return (jsxs("div", { className: styles['order-details'], children: [jsxs("section", { className: styles['order-header'], children: [jsxs("div", { className: styles['order-header-info'], children: [jsxs(Heading, { size: "xxs", tag: "h2", children: [jsx(FormattedMessage, { id: "Order" }), " #", order.webOrderNumber] }), jsxs("div", { children: [jsx(FormattedMessage, { id: "Status" }), ":", ' ', jsx(StatusText, { "data-test-selector": "order-status", status: status, children: jsx(FormattedMessage, { noTranslationId: true, id: `orderStatus.${order.status}` }) })] })] }), jsx(PrintButton, {}), jsx(Button, { "data-test-selector": "reorder-button", children: jsx(FormattedMessage, { id: "Reorder" }) })] }), jsxs("section", { className: styles['order-additional-info'], children: [jsxs("dl", { children: [jsx("dt", { children: jsx(FormattedMessage, { id: "orderProperty.Date" }) }), jsx("dd", { children: jsx(FormattedDate, { date: order.orderDate }) })] }), jsxs("dl", { children: [jsx("dt", { children: jsx(FormattedMessage, { id: "orderProperty.PO Number" }) }), jsx("dd", { children: order.customerNumber })] })] }), jsx("section", { className: styles['order-billing-and-shipping'], children: jsx(BillingAndInvoiceInformation, { billToAddress: getOrderBillToAddress(order), shipToAddress: getOrderShipToAddress(order) }) }), jsx("section", { className: styles['order-top-button'], children: jsx(Button, { color: "secondary", href: returnUrl || paths.ACCOUNT_ORDERS, variant: "outline", children: jsx(FormattedMessage, { id: "Back" }) }) }), jsxs("section", { className: styles['order-line-list'], children: [jsx(Heading, { size: "xxs", tag: "h3", children: jsx(FormattedMessage, { id: "Products" }) }), jsx(OrderLineList, { children: order.orderLines?.map(line => (jsx(OrderLineCard, { isReadonly: true, href: line.productUri, image: {
+                                fit: 'contain',
+                                image: {
+                                    '1': line.mediumImagePath,
+                                    '2': line.mediumImagePath,
+                                    '3': line.mediumImagePath,
+                                    altText: line.altText,
+                                },
+                                title: line.altText,
+                            }, price: {
+                                currencyCode: order.currencyCode,
+                                originalTotalPrice: ensureNumber(line.lineTotal),
+                                pricePerUnit: line.unitPrice,
+                                totalPrice: line.lineTotal,
+                            }, productId: line.productId, quantity: line.qtyOrdered, sku: line.customerProductNumber, title: line.shortDescription }, line.id))) })] }), jsx("section", { className: styles['order-cost-overview'], children: jsx(CartTotals, { currencyCode: order.currencyCode, shippingCost: order.shippingAndHandling, subtotal: order.orderSubTotal, tax: order.taxAmount, total: order.orderTotal, vatPercentage: undefined }) }), jsx("section", { className: styles['order-bottom-button'], children: jsx(Button, { color: "secondary", href: returnUrl || paths.ACCOUNT_ORDERS, variant: "outline", children: jsx(FormattedMessage, { id: "Back" }) }) })] }));
+}
+
+export { OrderDetailsContent, statusMap };

package/dist/pages/my-sonic/pages/order-details/order-details-content.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"order-details":"order-details-content-module-aU3VQ","order-header":"order-details-content-module-q0QYm","order-header-info":"order-details-content-module-d9sC4","order-additional-info":"order-details-content-module--1w7s","order-line-list":"order-details-content-module-BO26h","order-top-button":"order-details-content-module-RkRvM","order-bottom-button":"order-details-content-module-o62H3"};
+
+export { styles as default };

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

@@ -0,0 +1,8 @@
+export type OrderDetailsProps = {
+    orderId: string;
+    returnUrl?: string;
+};
+export declare function OrderDetailsPage({ orderId, returnUrl }: OrderDetailsProps): import("react/jsx-runtime").JSX.Element;
+export declare function OrderDetailsPageBreadcrumb({ orderId }: {
+    orderId: string;
+}): import("react/jsx-runtime").JSX.Element;