@sonic-equipment/ui 211.0.0 → 213.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (49) hide show
  1. package/dist/algolia/algolia-query-string-routing.js +2 -2
  2. package/dist/authentication/authenticated-container.d.ts +9 -0
  3. package/dist/authentication/authenticated-container.js +21 -0
  4. package/dist/base.css +1 -2
  5. package/dist/cards/table-card/table-card.js +1 -0
  6. package/dist/carousel/carousel.js +3 -3
  7. package/dist/carousel/usp-carousel/usp-carousel.js +1 -1
  8. package/dist/cart-totals/cart-totals.js +1 -1
  9. package/dist/collapsables/accordion/accordion-item.js +1 -1
  10. package/dist/collapsables/show-all/show-all.js +1 -1
  11. package/dist/exports.d.ts +1 -0
  12. package/dist/header/buttons/account/connected-account-button.js +1 -1
  13. package/dist/index.js +1 -0
  14. package/dist/media/image-lightbox/image-lightbox.js +3 -3
  15. package/dist/navigation/account-icon/account-icon.js +1 -1
  16. package/dist/node_modules/.pnpm/qs@6.9.7/node_modules/qs/lib/stringify.js +1 -1
  17. package/dist/node_modules/.pnpm/{swiper@11.2.8 → swiper@11.2.10}/node_modules/swiper/shared/ssr-window.esm.js +2 -2
  18. package/dist/node_modules/.pnpm/{swiper@11.2.8 → swiper@11.2.10}/node_modules/swiper/shared/swiper-core.js +28 -12
  19. package/dist/node_modules/.pnpm/{swiper@11.2.8 → swiper@11.2.10}/node_modules/swiper/swiper-react.js +2 -2
  20. package/dist/pages/account/sign-in-page/sign-in-page.js +1 -1
  21. package/dist/pages/my-sonic/pages/order-history/order-history.js +8 -5
  22. package/dist/pages/my-sonic/widgets/connected-address-book-widget.js +10 -6
  23. package/dist/shared/api/storefront/hooks/cart/use-fetch-current-cart-lines-with-atp.d.ts +6 -0
  24. package/dist/shared/api/storefront/hooks/cart/use-fetch-current-cart-with-atp.d.ts +6 -0
  25. package/dist/shared/api/storefront/hooks/customer/use-fetch-paged-ship-to-addresses.js +1 -0
  26. package/dist/sidebar/sidebar.js +1 -1
  27. package/dist/styles.css +24 -22
  28. package/dist/table/data-table.d.ts +8 -1
  29. package/dist/table/data-table.js +6 -6
  30. package/dist/table/elements/table-sort-button.js +1 -1
  31. package/dist/table/elements/td.d.ts +1 -0
  32. package/dist/table/elements/td.js +1 -1
  33. package/dist/table/elements/tr.d.ts +1 -1
  34. package/dist/table/elements/tr.js +2 -2
  35. package/dist/table/elements/types.d.ts +1 -0
  36. package/package.json +46 -52
  37. /package/dist/node_modules/.pnpm/{instantsearch.js@4.78.3_algoliasearch@4.24.0 → instantsearch.js@4.79.2_algoliasearch@4.24.0}/node_modules/instantsearch.js/es/lib/routers/history.js +0 -0
  38. /package/dist/node_modules/.pnpm/{instantsearch.js@4.78.3_algoliasearch@4.24.0 → instantsearch.js@4.79.2_algoliasearch@4.24.0}/node_modules/instantsearch.js/es/lib/stateMappings/simple.js +0 -0
  39. /package/dist/node_modules/.pnpm/{instantsearch.js@4.78.3_algoliasearch@4.24.0 → instantsearch.js@4.79.2_algoliasearch@4.24.0}/node_modules/instantsearch.js/es/lib/utils/documentation.js +0 -0
  40. /package/dist/node_modules/.pnpm/{instantsearch.js@4.78.3_algoliasearch@4.24.0 → instantsearch.js@4.79.2_algoliasearch@4.24.0}/node_modules/instantsearch.js/es/lib/utils/logger.js +0 -0
  41. /package/dist/node_modules/.pnpm/{instantsearch.js@4.78.3_algoliasearch@4.24.0 → instantsearch.js@4.79.2_algoliasearch@4.24.0}/node_modules/instantsearch.js/es/lib/utils/noop.js +0 -0
  42. /package/dist/node_modules/.pnpm/{instantsearch.js@4.78.3_algoliasearch@4.24.0 → instantsearch.js@4.79.2_algoliasearch@4.24.0}/node_modules/instantsearch.js/es/lib/utils/safelyRunOnBrowser.js +0 -0
  43. /package/dist/node_modules/.pnpm/{swiper@11.2.8 → swiper@11.2.10}/node_modules/swiper/modules/free-mode.js +0 -0
  44. /package/dist/node_modules/.pnpm/{swiper@11.2.8 → swiper@11.2.10}/node_modules/swiper/modules/navigation.js +0 -0
  45. /package/dist/node_modules/.pnpm/{swiper@11.2.8 → swiper@11.2.10}/node_modules/swiper/modules/thumbs.js +0 -0
  46. /package/dist/node_modules/.pnpm/{swiper@11.2.8 → swiper@11.2.10}/node_modules/swiper/shared/create-element-if-not-defined.js +0 -0
  47. /package/dist/node_modules/.pnpm/{swiper@11.2.8 → swiper@11.2.10}/node_modules/swiper/shared/update-on-virtual-data.js +0 -0
  48. /package/dist/node_modules/.pnpm/{swiper@11.2.8 → swiper@11.2.10}/node_modules/swiper/shared/update-swiper.js +0 -0
  49. /package/dist/node_modules/.pnpm/{swiper@11.2.8 → swiper@11.2.10}/node_modules/swiper/shared/utils.js +0 -0
@@ -1,6 +1,6 @@
1
1
  "use client";
2
- import simpleStateMapping from '../node_modules/.pnpm/instantsearch.js@4.78.3_algoliasearch@4.24.0/node_modules/instantsearch.js/es/lib/stateMappings/simple.js';
3
- import historyRouter from '../node_modules/.pnpm/instantsearch.js@4.78.3_algoliasearch@4.24.0/node_modules/instantsearch.js/es/lib/routers/history.js';
2
+ import simpleStateMapping from '../node_modules/.pnpm/instantsearch.js@4.79.2_algoliasearch@4.24.0/node_modules/instantsearch.js/es/lib/stateMappings/simple.js';
3
+ import historyRouter from '../node_modules/.pnpm/instantsearch.js@4.79.2_algoliasearch@4.24.0/node_modules/instantsearch.js/es/lib/routers/history.js';
4
4
 
5
5
  function createQueryStringRouting({ algoliaIndex, hierarchicalCategories, }) {
6
6
  return {
@@ -0,0 +1,9 @@
1
+ import { ReactNode } from 'react';
2
+ export declare function AuthenticatedContainer({ children, onUnauthenticated, views, }: {
3
+ children: React.ReactNode;
4
+ onUnauthenticated?: () => void;
5
+ views?: {
6
+ unauthenticated?: ReactNode;
7
+ undetermined?: ReactNode;
8
+ };
9
+ }): string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | null;
@@ -0,0 +1,21 @@
1
+ "use client";
2
+ import { jsx, Fragment } from 'react/jsx-runtime';
3
+ import { useRef, useEffect } from 'react';
4
+ import { useIsAuthenticated } from '../shared/api/storefront/hooks/authentication/use-is-authenticated.js';
5
+
6
+ function AuthenticatedContainer({ children, onUnauthenticated, views, }) {
7
+ const isAuthenticated = useIsAuthenticated();
8
+ const wasAuthenticated = useRef(Boolean(isAuthenticated));
9
+ useEffect(() => {
10
+ if (wasAuthenticated.current === true && isAuthenticated === false)
11
+ onUnauthenticated?.();
12
+ wasAuthenticated.current = isAuthenticated || false;
13
+ }, [isAuthenticated, onUnauthenticated]);
14
+ if (isAuthenticated === false)
15
+ return views?.unauthenticated ?? null;
16
+ if (isAuthenticated === undefined)
17
+ return views?.undetermined ?? null;
18
+ return jsx(Fragment, { children: children });
19
+ }
20
+
21
+ export { AuthenticatedContainer };
package/dist/base.css CHANGED
@@ -15,8 +15,7 @@ body {
15
15
  color: #000;
16
16
  font-size: 16px;
17
17
  font-weight: 400;
18
- -webkit-hyphens: auto;
19
- hyphens: auto;
18
+ hyphens: auto;
20
19
  line-height: 1.5;
21
20
  }
22
21
 
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
2
3
  import clsx from 'clsx';
3
4
  import { FormattedMessage } from '../../intl/formatted-message.js';
@@ -2,9 +2,9 @@
2
2
  import { jsxs, jsx } from 'react/jsx-runtime';
3
3
  import { useState, useRef, useMemo } from 'react';
4
4
  import clsx from 'clsx';
5
- import Navigation from '../node_modules/.pnpm/swiper@11.2.8/node_modules/swiper/modules/navigation.js';
6
- import freeMode from '../node_modules/.pnpm/swiper@11.2.8/node_modules/swiper/modules/free-mode.js';
7
- import { Swiper, SwiperSlide } from '../node_modules/.pnpm/swiper@11.2.8/node_modules/swiper/swiper-react.js';
5
+ import Navigation from '../node_modules/.pnpm/swiper@11.2.10/node_modules/swiper/modules/navigation.js';
6
+ import freeMode from '../node_modules/.pnpm/swiper@11.2.10/node_modules/swiper/modules/free-mode.js';
7
+ import { Swiper, SwiperSlide } from '../node_modules/.pnpm/swiper@11.2.10/node_modules/swiper/swiper-react.js';
8
8
  import { breakpoints } from '../shared/utils/breakpoints.js';
9
9
  import { deepMerge } from '../shared/utils/merge.js';
10
10
  import { CarouselNavigationButton } from './carousel-navigation-button.js';
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import { jsxs, jsx } from 'react/jsx-runtime';
3
3
  import { useRef, useState } from 'react';
4
- import { Swiper, SwiperSlide } from '../../node_modules/.pnpm/swiper@11.2.8/node_modules/swiper/swiper-react.js';
4
+ import { Swiper, SwiperSlide } from '../../node_modules/.pnpm/swiper@11.2.10/node_modules/swiper/swiper-react.js';
5
5
  import { CarouselPagination } from '../pagination/pagination.js';
6
6
  import styles from './usp-carousel.module.css.js';
7
7
 
@@ -9,7 +9,7 @@ import styles from './cart-totals.module.css.js';
9
9
  const formatDisplayPriceToSymbolSpaceValue = (displayPrice) => displayPrice.replace(/^(\D)([\d,.]*$)/, (_, symbol, value) => `${symbol} ${value}`);
10
10
  function CartTotals({ currencyCode, deliveryDate, fulfillmentMethod, isPayByInvoice, orderNumber, shippingCost, subtotal, tax, total, vatPercentage, }) {
11
11
  const t = useFormattedMessage();
12
- return (jsxs("div", { className: styles['cart-totals'], children: [orderNumber && (jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Order number" }) }), jsx("div", { children: jsx("div", { className: styles.line, children: jsx("p", { className: styles.label, "data-test-selector": "orderConfirmation_orderNumber", children: orderNumber }) }) })] })), deliveryDate !== undefined && (jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Delivery date" }) }), jsx("div", { children: jsx("div", { className: styles.line, children: jsx("p", { className: styles.label, "data-test-selector": "deliveryDate", children: deliveryDate || t('As soon as possible') }) }) })] })), fulfillmentMethod && (jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Fulfillment method" }) }), jsx("div", { children: jsx("div", { className: styles.line, children: jsx("p", { className: styles.label, "data-test-selector": "fulfillmentMethod", children: jsx(FormattedMessage, { id: `fulfillmentmethod.${fulfillmentMethod}` }) }) }) })] })), isPayByInvoice && (jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Payment method" }) }), jsx("div", { children: jsx("div", { className: styles.line, children: jsx("p", { className: styles.label, "data-test-selector": "paymentMethod", children: jsx(FormattedMessage, { id: "Pay by invoice" }) }) }) })] })), jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Cost overview" }) }), jsxs("div", { children: [jsxs("div", { className: styles.line, children: [jsxs("p", { className: styles.label, children: [jsx(FormattedMessage, { id: "Subtotal" }), ' ', jsx(FormattedMessage, { id: "Excl. VAT" })] }), jsx(Price, { className: styles.value, currencyCode: currencyCode, "data-test-selector": "cartTotal_subTotal", price: subtotal })] }), jsxs("div", { className: styles.line, children: [jsx("p", { className: styles.label, children: jsx(FormattedMessage, { id: "Shipping and handling" }) }), jsx(Price, { className: styles.value, currencyCode: currencyCode, "data-test-selector": "shippingCost", price: shippingCost })] }), jsxs("div", { className: styles.line, children: [jsxs("p", { className: styles.label, children: [jsx(FormattedMessage, { id: "VAT" }), ' ', vatPercentage ? `${vatPercentage}%` : ''] }), jsx(Price, { className: styles.value, currencyCode: currencyCode, "data-test-selector": "vatAmount", price: tax })] })] })] }), jsx("section", { className: styles.totals, children: jsxs("div", { className: styles.line, children: [jsx("p", { className: styles.label, children: jsx(FormattedMessage, { id: "Total" }) }), jsx(Price, { className: styles.value, currencyCode: currencyCode, "data-test-selector": "cartTotal_orderGrandTotalDisplay", price: total })] }) })] }));
12
+ return (jsxs("div", { className: styles['cart-totals'], children: [orderNumber && (jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Order number" }) }), jsx("div", { children: jsx("div", { className: styles.line, children: jsx("p", { className: styles.label, "data-test-selector": "orderConfirmation_orderNumber", children: orderNumber }) }) })] })), deliveryDate !== undefined && (jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Delivery date" }) }), jsx("div", { children: jsx("div", { className: styles.line, children: jsx("p", { className: styles.label, "data-test-selector": "deliveryDate", children: deliveryDate || t('As soon as possible') }) }) })] })), fulfillmentMethod && (jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Fulfillment method" }) }), jsx("div", { children: jsx("div", { className: styles.line, children: jsx("p", { className: styles.label, "data-test-selector": "fulfillmentMethod", children: jsx(FormattedMessage, { id: `fulfillmentmethod.${fulfillmentMethod}` }) }) }) })] })), isPayByInvoice && (jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Payment method" }) }), jsx("div", { children: jsx("div", { className: styles.line, children: jsx("p", { className: styles.label, "data-test-selector": "paymentMethod", children: jsx(FormattedMessage, { id: "Pay by invoice" }) }) }) })] })), jsxs("section", { className: styles.section, children: [jsx(Heading, { className: styles['section-header'], size: "xxxs", tag: "h3", children: jsx(FormattedMessage, { id: "Cost overview" }) }), jsxs("div", { children: [jsxs("div", { className: styles.line, children: [jsxs("p", { className: styles.label, children: [jsx(FormattedMessage, { id: "Subtotal" }), " (", jsx(FormattedMessage, { id: "Excl. VAT" }), ")"] }), jsx(Price, { className: styles.value, currencyCode: currencyCode, "data-test-selector": "cartTotal_subTotal", price: subtotal })] }), jsxs("div", { className: styles.line, children: [jsx("p", { className: styles.label, children: jsx(FormattedMessage, { id: "Shipping and handling" }) }), jsx(Price, { className: styles.value, currencyCode: currencyCode, "data-test-selector": "shippingCost", price: shippingCost })] }), jsxs("div", { className: styles.line, children: [jsxs("p", { className: styles.label, children: [jsx(FormattedMessage, { id: "VAT" }), ' ', vatPercentage ? `${vatPercentage}%` : ''] }), jsx(Price, { className: styles.value, currencyCode: currencyCode, "data-test-selector": "vatAmount", price: tax })] })] })] }), jsx("section", { className: styles.totals, children: jsxs("div", { className: styles.line, children: [jsx("p", { className: styles.label, children: jsx(FormattedMessage, { id: "Total" }) }), jsx(Price, { className: styles.value, currencyCode: currencyCode, "data-test-selector": "cartTotal_orderGrandTotalDisplay", price: total })] }) })] }));
13
13
  }
14
14
 
15
15
  export { CartTotals, formatDisplayPriceToSymbolSpaceValue };
@@ -29,7 +29,7 @@ function AccordionItem({ _pseudo = 'none', allowCollapse = true, allowToggle = t
29
29
  }), disabled: isDisabled, id: id, onClick: () => {
30
30
  if (allowToggle && allowCollapse)
31
31
  toggle();
32
- }, tabIndex: allowToggle ? 0 : -1, type: "button", children: [title, jsx("span", { className: styles.icon, children: size === 'lg' ? (jsx(GlyphsChevronsBoldDownIcon, {})) : (jsx(GlyphsChevronsSlimDownIcon, {})) })] }) }), jsx("div", { "aria-hidden": !isOpen, "aria-labelledby": id, className: styles.panel, id: panelId, inert: isOpen ? undefined : 'true', role: "region", children: children })] }));
32
+ }, tabIndex: allowToggle ? 0 : -1, type: "button", children: [title, jsx("span", { className: styles.icon, children: size === 'lg' ? (jsx(GlyphsChevronsBoldDownIcon, {})) : (jsx(GlyphsChevronsSlimDownIcon, {})) })] }) }), jsx("div", { "aria-hidden": !isOpen, "aria-labelledby": id, className: styles.panel, id: panelId, inert: isOpen ? undefined : true, role: "region", children: children })] }));
33
33
  }
34
34
 
35
35
  export { AccordionItem };
@@ -23,7 +23,7 @@ function ShowAll({ children, hasTransparency = true, initialHeight = 0, initialI
23
23
  [styles['is-open']]: isReallyOpen,
24
24
  }), style: contentFits ? undefined : { '--initial-height': `${initialHeight}px` }, children: [jsx("div", { className: styles.panel, children: jsx("div", { className: clsx(styles.content, {
25
25
  [styles['has-transparency']]: !contentFits && hasTransparency,
26
- }), children: jsx("div", { ref: ref, "aria-hidden": !isReallyOpen, inert: isReallyOpen ? undefined : 'true', children: children }) }) }), !contentFits && (jsxs(Link, { className: styles.button, color: "secondary", onClick: () => {
26
+ }), children: jsx("div", { ref: ref, "aria-hidden": !isReallyOpen, inert: isReallyOpen ? undefined : true, children: children }) }) }), !contentFits && (jsxs(Link, { className: styles.button, color: "secondary", onClick: () => {
27
27
  if (isControlled)
28
28
  return onToggle(!isControlled);
29
29
  toggle();
package/dist/exports.d.ts CHANGED
@@ -26,6 +26,7 @@ export * from './algolia/use-algolia-insights';
26
26
  export * from './algolia/use-algolia-insights-provider-global-state';
27
27
  export * from './algolia/use-algolia-instant-search-state';
28
28
  export * from './algolia/use-algolia-search';
29
+ export * from './authentication/authenticated-container';
29
30
  export * from './background-overlay/background-overlay';
30
31
  export * from './background-overlay/background-overlay-manager';
31
32
  export * from './badges/badge/badge';
@@ -14,7 +14,7 @@ function ConnectedAccountButton({ className, 'data-test-selector': dataTestSelec
14
14
  const { href } = useLocation();
15
15
  return (jsx(IconButton, { className: className, "data-authenticated": isAuthenticated ? true : false, "data-test-selector": dataTestSelector, href: isAuthenticated
16
16
  ? paths.ACCOUNT
17
- : `${paths.SIGN_IN}${href ? `?returnUrl=${encodeURIComponent(href)}` : ''}`, onClick: onClick, children: jsx(AccountIcon, { "aria-label": isAuthenticated ? t('My Sonic') : t('Sign in or create account'), isAuthenticated: isAuthenticated }) }));
17
+ : `${paths.SIGN_IN}${href ? `?returnUrl=${encodeURIComponent(href)}` : ''}`, isDisabled: isAuthenticated === undefined, onClick: onClick, children: jsx(AccountIcon, { "aria-label": isAuthenticated ? t('My Sonic') : t('Sign in or create account'), isAuthenticated: isAuthenticated }) }));
18
18
  }
19
19
 
20
20
  export { ConnectedAccountButton };
package/dist/index.js CHANGED
@@ -31,6 +31,7 @@ export { useAlgoliaInsights } from './algolia/use-algolia-insights.js';
31
31
  export { useAlgoliaInsightsGlobalState } from './algolia/use-algolia-insights-provider-global-state.js';
32
32
  export { useAlgoliaInstantSearchState, useAlgoliaInstantSearchStateIndex, useAlgoliaInstantSearchStateOnline, useAlgoliaInstantSearchStateQueryId, useAlgoliaInstantSearchStateStatus } from './algolia/use-algolia-instant-search-state.js';
33
33
  export { useAlgoliaSearch } from './algolia/use-algolia-search.js';
34
+ export { AuthenticatedContainer } from './authentication/authenticated-container.js';
34
35
  export { BackgroundOverlay } from './background-overlay/background-overlay.js';
35
36
  export { BackgroundOverlayManager } from './background-overlay/background-overlay-manager.js';
36
37
  export { Badge } from './badges/badge/badge.js';
@@ -2,9 +2,9 @@
2
2
  import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
3
3
  import { useState, useRef } from 'react';
4
4
  import clsx from 'clsx';
5
- import Navigation from '../../node_modules/.pnpm/swiper@11.2.8/node_modules/swiper/modules/navigation.js';
6
- import Thumb from '../../node_modules/.pnpm/swiper@11.2.8/node_modules/swiper/modules/thumbs.js';
7
- import { Swiper, SwiperSlide } from '../../node_modules/.pnpm/swiper@11.2.8/node_modules/swiper/swiper-react.js';
5
+ import Navigation from '../../node_modules/.pnpm/swiper@11.2.10/node_modules/swiper/modules/navigation.js';
6
+ import Thumb from '../../node_modules/.pnpm/swiper@11.2.10/node_modules/swiper/modules/thumbs.js';
7
+ import { Swiper, SwiperSlide } from '../../node_modules/.pnpm/swiper@11.2.10/node_modules/swiper/swiper-react.js';
8
8
  import { CarouselNavigationButton } from '../../carousel/carousel-navigation-button.js';
9
9
  import { CarouselPagination } from '../../carousel/pagination/pagination.js';
10
10
  import { Image } from '../image/image.js';
@@ -7,7 +7,7 @@ import { useFormattedMessage } from '../../intl/use-formatted-message.js';
7
7
 
8
8
  function AccountIcon({ 'aria-label': ariaLabel, isAuthenticated, }) {
9
9
  const t = useFormattedMessage();
10
- return (jsx(IconWithBadge, { "aria-label": ariaLabel, badge: isAuthenticated ? (jsx(Badge, { "aria-label": `(${t('Signed in')})`, variant: "green" })) : (jsx(Badge, { "aria-label": `(${t('Signed out')})`, variant: "red" })), icon: jsx(SolidLoginIcon, { role: "presentation" }) }));
10
+ return (jsx(IconWithBadge, { "aria-label": ariaLabel, badge: isAuthenticated === undefined ? null : isAuthenticated ? (jsx(Badge, { "aria-label": `(${t('Signed in')})`, variant: "green" })) : (jsx(Badge, { "aria-label": `(${t('Signed out')})`, variant: "red" })), icon: jsx(SolidLoginIcon, { role: "presentation" }) }));
11
11
  }
12
12
 
13
13
  export { AccountIcon };
@@ -127,7 +127,7 @@ function requireStringify () {
127
127
  var objKeys;
128
128
  if (generateArrayPrefix === 'comma' && isArray(obj)) {
129
129
  // we need to join elements in
130
- objKeys = [{ value: obj.length > 0 ? obj.join(',') || null : void 0 }];
130
+ objKeys = [{ value: obj.length > 0 ? obj.join(',') || null : void undefined }];
131
131
  } else if (isArray(filter)) {
132
132
  objKeys = filter;
133
133
  } else {
@@ -1,5 +1,5 @@
1
1
  /**
2
- * SSR Window 5.0.0
2
+ * SSR Window 5.0.1
3
3
  * Better handling for window object in SSR environment
4
4
  * https://github.com/nolimits4web/ssr-window
5
5
  *
@@ -7,7 +7,7 @@
7
7
  *
8
8
  * Licensed under MIT
9
9
  *
10
- * Released on: February 12, 2025
10
+ * Released on: June 27, 2025
11
11
  */
12
12
  /* eslint-disable no-param-reassign */
13
13
  function isObject(obj) {
@@ -1768,23 +1768,16 @@ function slideToClickedSlide() {
1768
1768
  slidesEl
1769
1769
  } = swiper;
1770
1770
  const slidesPerView = params.slidesPerView === 'auto' ? swiper.slidesPerViewDynamic() : params.slidesPerView;
1771
- let slideToIndex = swiper.clickedIndex;
1771
+ let slideToIndex = swiper.getSlideIndexWhenGrid(swiper.clickedIndex);
1772
1772
  let realIndex;
1773
1773
  const slideSelector = swiper.isElement ? `swiper-slide` : `.${params.slideClass}`;
1774
+ const isGrid = swiper.grid && swiper.params.grid && swiper.params.grid.rows > 1;
1774
1775
  if (params.loop) {
1775
1776
  if (swiper.animating) return;
1776
1777
  realIndex = parseInt(swiper.clickedSlide.getAttribute('data-swiper-slide-index'), 10);
1777
1778
  if (params.centeredSlides) {
1778
- if (slideToIndex < swiper.loopedSlides - slidesPerView / 2 || slideToIndex > swiper.slides.length - swiper.loopedSlides + slidesPerView / 2) {
1779
- swiper.loopFix();
1780
- slideToIndex = swiper.getSlideIndex(elementChildren(slidesEl, `${slideSelector}[data-swiper-slide-index="${realIndex}"]`)[0]);
1781
- nextTick(() => {
1782
- swiper.slideTo(slideToIndex);
1783
- });
1784
- } else {
1785
- swiper.slideTo(slideToIndex);
1786
- }
1787
- } else if (slideToIndex > swiper.slides.length - slidesPerView) {
1779
+ swiper.slideToLoop(realIndex);
1780
+ } else if (slideToIndex > (isGrid ? (swiper.slides.length - slidesPerView) / 2 - (swiper.params.grid.rows - 1) : swiper.slides.length - slidesPerView)) {
1788
1781
  swiper.loopFix();
1789
1782
  slideToIndex = swiper.getSlideIndex(elementChildren(slidesEl, `${slideSelector}[data-swiper-slide-index="${realIndex}"]`)[0]);
1790
1783
  nextTick(() => {
@@ -1821,7 +1814,20 @@ function loopCreate(slideRealIndex, initial) {
1821
1814
  el.setAttribute('data-swiper-slide-index', index);
1822
1815
  });
1823
1816
  };
1817
+ const clearBlankSlides = () => {
1818
+ const slides = elementChildren(slidesEl, `.${params.slideBlankClass}`);
1819
+ slides.forEach(el => {
1820
+ el.remove();
1821
+ });
1822
+ if (slides.length > 0) {
1823
+ swiper.recalcSlides();
1824
+ swiper.updateSlides();
1825
+ }
1826
+ };
1824
1827
  const gridEnabled = swiper.grid && params.grid && params.grid.rows > 1;
1828
+ if (params.loopAddBlankSlides && (params.slidesPerGroup > 1 || gridEnabled)) {
1829
+ clearBlankSlides();
1830
+ }
1825
1831
  const slidesPerGroup = params.slidesPerGroup * (gridEnabled ? params.grid.rows : 1);
1826
1832
  const shouldFillGroup = swiper.slides.length % slidesPerGroup !== 0;
1827
1833
  const shouldFillGrid = gridEnabled && swiper.slides.length % params.grid.rows !== 0;
@@ -1913,7 +1919,7 @@ function loopFix(_temp) {
1913
1919
  }
1914
1920
  }
1915
1921
  const slidesPerGroup = params.slidesPerGroupAuto ? slidesPerView : params.slidesPerGroup;
1916
- let loopedSlides = slidesPerGroup;
1922
+ let loopedSlides = centeredSlides ? Math.max(slidesPerGroup, Math.ceil(slidesPerView / 2)) : slidesPerGroup;
1917
1923
  if (loopedSlides % slidesPerGroup !== 0) {
1918
1924
  loopedSlides += slidesPerGroup - loopedSlides % slidesPerGroup;
1919
1925
  }
@@ -3510,6 +3516,16 @@ class Swiper {
3510
3516
  getSlideIndexByData(index) {
3511
3517
  return this.getSlideIndex(this.slides.find(slideEl => slideEl.getAttribute('data-swiper-slide-index') * 1 === index));
3512
3518
  }
3519
+ getSlideIndexWhenGrid(index) {
3520
+ if (this.grid && this.params.grid && this.params.grid.rows > 1) {
3521
+ if (this.params.grid.fill === 'column') {
3522
+ index = Math.floor(index / this.params.grid.rows);
3523
+ } else if (this.params.grid.fill === 'row') {
3524
+ index = index % Math.ceil(this.slides.length / this.params.grid.rows);
3525
+ }
3526
+ }
3527
+ return index;
3528
+ }
3513
3529
  recalcSlides() {
3514
3530
  const swiper = this;
3515
3531
  const {
@@ -4,7 +4,7 @@ import { g as getParams, m as mountSwiper, a as getChangedParams, u as updateOnV
4
4
  import { d as uniqueClasses, w as wrapperClass, n as needsNavigation, b as needsScrollbar, a as needsPagination, e as extend, u as updateSwiper } from './shared/update-swiper.js';
5
5
 
6
6
  /**
7
- * Swiper React 11.2.8
7
+ * Swiper React 11.2.10
8
8
  * Most modern mobile touch slider and framework with hardware accelerated transitions
9
9
  * https://swiperjs.com
10
10
  *
@@ -12,7 +12,7 @@ import { d as uniqueClasses, w as wrapperClass, n as needsNavigation, b as needs
12
12
  *
13
13
  * Released under the MIT License
14
14
  *
15
- * Released on: May 23, 2025
15
+ * Released on: June 28, 2025
16
16
  */
17
17
 
18
18
 
@@ -44,7 +44,7 @@ function SignInPage({ returnUrl } = {}) {
44
44
  if (data.guestSignIn) {
45
45
  if (session?.isGuest && session.isAuthenticated)
46
46
  return onSuccess();
47
- createGuest(void 0, { onSuccess });
47
+ createGuest(void undefined, { onSuccess });
48
48
  }
49
49
  else {
50
50
  signIn({
@@ -66,9 +66,10 @@ function OrderHistory() {
66
66
  ...options,
67
67
  [status]: t(`orderStatus.${status}`),
68
68
  }), { any: t('orderStatus.Any') });
69
- return (jsx(Fragment, { children: jsxs("section", { ref: orderHistoryRef, className: styles['order-history'], children: [jsx("div", { className: styles['search'], children: jsx(SearchField, { isDebounced: true, label: t('Search orders'), onChange: searchOrders, placeholder: t('Search orders'), showLabel: false, variant: "outline" }) }), jsx("div", { className: styles['filter'], children: jsx(SelectField, { label: t('Filter order status'), onChange: filterOrders, options: filterOptions, selectedOption: status, showLabel: false }) }), jsx("div", { "aria-label": t('Results'), "aria-live": "polite", className: styles['results'], children: jsx(DynamicLoadingOverlay, { isLoading: isFetching, children: orders && orders.length > 0 ? (jsx(DataTable, { actions: [
69
+ return (jsx(Fragment, { children: jsxs("section", { ref: orderHistoryRef, className: styles['order-history'], "data-test-selector": "order-history", children: [jsx("div", { className: styles['search'], children: jsx(SearchField, { isDebounced: true, "data-test-selector": "order-history-search", label: t('Search orders'), onChange: searchOrders, placeholder: t('Search orders'), showLabel: false, variant: "outline" }) }), jsx("div", { className: styles['filter'], children: jsx(SelectField, { "data-test-selector": "order-history-filter", label: t('Filter order status'), onChange: filterOrders, options: filterOptions, selectedOption: status, showLabel: false }) }), jsx("div", { "aria-label": t('Results'), "aria-live": "polite", className: styles['results'], children: jsx(DynamicLoadingOverlay, { isLoading: isFetching, children: orders && orders.length > 0 ? (jsx(DataTable, { actions: [
70
70
  {
71
- isPrimary: true,
71
+ 'data-test-selector': 'order-history-reorder',
72
+ isPrimary: false,
72
73
  key: 'reorder',
73
74
  label: 'Reorder',
74
75
  onAction: order => window?.alert(`Reorder ${order.id}`),
@@ -80,13 +81,13 @@ function OrderHistory() {
80
81
  },
81
82
  key: 'webOrderNumber',
82
83
  props: {
83
- cssColumn: 'minmax(10ch, min-content)',
84
+ cssColumn: 'minmax(15ch, min-content)',
84
85
  nowrap: true,
85
86
  sticky: true,
86
87
  },
87
88
  sort: { direction: 'DESC', isEnabled: true },
88
89
  value: {
89
- render: order => (jsx(Link, { hasUnderline: true, color: "secondary", href: `/my-sonic/order-history/${order.id}`, onClick: () => window?.alert(`open ${order.id}`), children: order.webOrderNumber })),
90
+ render: order => (jsx(Link, { hasUnderline: true, color: "secondary", "data-test-selector": "order-history-order-link", href: `/my-sonic/order-history/${order.id}`, onClick: () => window?.alert(`open ${order.id}`), children: order.webOrderNumber })),
90
91
  },
91
92
  },
92
93
  {
@@ -163,7 +164,9 @@ function OrderHistory() {
163
164
  name: key,
164
165
  order: direction,
165
166
  });
166
- } })) : (!isFetching && (jsx("p", { className: styles['no-results'], children: t('No orders found.') }))) }) }), orders && orders.length > 0 && (jsx("nav", { className: styles['paging'], children: jsx(Pagination, { currentPage: pagination?.currentPage || 1, onChange: page => setPage(page), totalPages: pagination?.numberOfPages || 1 }) })), jsx("div", { className: styles['sticky-bar'], role: "presentation" })] }) }));
167
+ }, row: {
168
+ 'data-test-selector': (order, _) => `tr-${order.id}`,
169
+ } })) : (!isFetching && (jsx("p", { className: styles['no-results'], children: t('No orders found.') }))) }) }), orders && orders.length > 0 && (jsx("nav", { className: styles['paging'], children: jsx(Pagination, { currentPage: pagination?.currentPage || 1, "data-test-selector": "order-history-pagination", onChange: page => setPage(page), totalPages: pagination?.numberOfPages || 1 }) })), jsx("div", { className: styles['sticky-bar'], role: "presentation" })] }) }));
167
170
  }
168
171
 
169
172
  export { OrderHistory };
@@ -49,11 +49,12 @@ function ConnectedAddressBookWidget() {
49
49
  }
50
50
  };
51
51
  return (jsx(TableCard, { stickyHeader: true, actions: [
52
- jsx(SearchField, { isDebounced: true, className: styles['search-field'], label: t('Search'), onChange: searchAddresses, placeholder: t('Search'), showLabel: false, size: "md", variant: "outline" }, "searchAddresses"),
53
- jsx(Button, { color: "secondary", href: `${paths.ACCOUNT_EDIT_BILL_TO_ADDRESS}/current${paths.ACCOUNT_EDIT_SHIP_TO_ADDRESS}/new?returnUrl=${encodeURIComponent(`${href}#${addressBookId}`)}`, size: "sm", variant: "outline", children: t('Add address') }, "addAddress"),
54
- ], className: styles['address-book-widget'], "data-test-selector": "address-book-widget", id: addressBookId, isLoading: isFetching, paging: addresses &&
52
+ jsx(SearchField, { isDebounced: true, className: styles['search-field'], "data-test-selector": "address-book-search", label: t('Search'), onChange: searchAddresses, placeholder: t('Search'), showLabel: false, size: "md", variant: "outline" }, "searchAddresses"),
53
+ jsx(Button, { color: "secondary", "data-test-selector": "address-book-add-address", href: `${paths.ACCOUNT_EDIT_BILL_TO_ADDRESS}/current${paths.ACCOUNT_EDIT_SHIP_TO_ADDRESS}/new?returnUrl=${encodeURIComponent(`${href}#${addressBookId}`)}`, size: "sm", variant: "outline", children: t('Add address') }, "addAddress"),
54
+ ], className: styles['address-book-widget'], "data-test-selector": "address-book", id: addressBookId, isLoading: isFetching, paging: addresses &&
55
55
  addresses.length > 0 && (jsx("nav", { className: styles['paging'], children: jsx(Pagination, { currentPage: pagination?.currentPage || 1, onChange: page => setPage(page), totalPages: pagination?.numberOfPages || 1 }) })), results: addresses ? addresses.length : 0, showError: error, title: "Address book", children: jsx("div", { ref: addressBookRef, "aria-label": "Results", "aria-live": "polite", className: styles['results'], children: jsx(DynamicLoadingOverlay, { isLoading: isFetching, children: jsx(DataTable, { actions: [
56
56
  {
57
+ 'data-test-selector': 'edit-address',
57
58
  href: address => `${paths.ACCOUNT_EDIT_BILL_TO_ADDRESS}/current${paths.ACCOUNT_EDIT_SHIP_TO_ADDRESS}/${address.id}?returnUrl=${encodeURIComponent(`${href}#${addressBookId}`)}`,
58
59
  key: 'edit',
59
60
  label: 'Edit',
@@ -71,7 +72,7 @@ function ConnectedAddressBookWidget() {
71
72
  },
72
73
  value: {
73
74
  render: address => {
74
- return (address.isDefault && (jsx(SolidRatingIcon, { "aria-label": `(${t('addressProperty.Default')})`, className: styles['default-icon'] })));
75
+ return (address.isDefault && (jsx(SolidRatingIcon, { "aria-label": `(${t('addressProperty.Default')})`, className: styles['default-icon'], "data-test-selector": "default-address" })));
75
76
  },
76
77
  },
77
78
  },
@@ -132,8 +133,8 @@ function ConnectedAddressBookWidget() {
132
133
  header: { label: 'addressProperty.Country' },
133
134
  key: 'country.name',
134
135
  props: {
135
- cssColumn: 'minmax(12ch, min-content)',
136
- nowrap: true,
136
+ cssColumn: 'minmax(15ch, min-content)',
137
+ truncated: 2,
137
138
  },
138
139
  sort: {
139
140
  isEnabled: true,
@@ -162,6 +163,9 @@ function ConnectedAddressBookWidget() {
162
163
  name: key,
163
164
  order: direction,
164
165
  });
166
+ }, row: {
167
+ 'data-test-selector': (address, _) => `address-${address.id}`,
168
+ selected: (address, _) => address.isDefault,
165
169
  } }) }) }) }));
166
170
  }
167
171
 
@@ -21,6 +21,7 @@ export declare function useFetchCurrentCartLinesWithAtp(): {
21
21
  isPaused: boolean;
22
22
  isRefetching: boolean;
23
23
  isStale: boolean;
24
+ isEnabled: boolean;
24
25
  refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<import("../../model/storefront.model").CartModel, Error>>;
25
26
  fetchStatus: import("@tanstack/react-query").FetchStatus;
26
27
  promise: Promise<import("../../model/storefront.model").CartModel>;
@@ -47,6 +48,7 @@ export declare function useFetchCurrentCartLinesWithAtp(): {
47
48
  isPaused: boolean;
48
49
  isRefetching: boolean;
49
50
  isStale: boolean;
51
+ isEnabled: boolean;
50
52
  refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<import("../../model/storefront.model").CartModel, Error>>;
51
53
  fetchStatus: import("@tanstack/react-query").FetchStatus;
52
54
  promise: Promise<import("../../model/storefront.model").CartModel>;
@@ -73,6 +75,7 @@ export declare function useFetchCurrentCartLinesWithAtp(): {
73
75
  isPaused: boolean;
74
76
  isRefetching: boolean;
75
77
  isStale: boolean;
78
+ isEnabled: boolean;
76
79
  refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<import("../../model/storefront.model").CartModel, Error>>;
77
80
  fetchStatus: import("@tanstack/react-query").FetchStatus;
78
81
  promise: Promise<import("../../model/storefront.model").CartModel>;
@@ -99,6 +102,7 @@ export declare function useFetchCurrentCartLinesWithAtp(): {
99
102
  isPaused: boolean;
100
103
  isRefetching: boolean;
101
104
  isStale: boolean;
105
+ isEnabled: boolean;
102
106
  refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<import("../../model/storefront.model").CartModel, Error>>;
103
107
  fetchStatus: import("@tanstack/react-query").FetchStatus;
104
108
  promise: Promise<import("../../model/storefront.model").CartModel>;
@@ -125,6 +129,7 @@ export declare function useFetchCurrentCartLinesWithAtp(): {
125
129
  isPaused: boolean;
126
130
  isRefetching: boolean;
127
131
  isStale: boolean;
132
+ isEnabled: boolean;
128
133
  refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<import("../../model/storefront.model").CartModel, Error>>;
129
134
  fetchStatus: import("@tanstack/react-query").FetchStatus;
130
135
  promise: Promise<import("../../model/storefront.model").CartModel>;
@@ -151,6 +156,7 @@ export declare function useFetchCurrentCartLinesWithAtp(): {
151
156
  isPaused: boolean;
152
157
  isRefetching: boolean;
153
158
  isStale: boolean;
159
+ isEnabled: boolean;
154
160
  refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<import("../../model/storefront.model").CartModel, Error>>;
155
161
  fetchStatus: import("@tanstack/react-query").FetchStatus;
156
162
  promise: Promise<import("../../model/storefront.model").CartModel>;
@@ -25,6 +25,7 @@ export declare function useFetchCurrentCartWithAtp<T = CartModel>({ forceRecalcu
25
25
  isPaused: boolean;
26
26
  isRefetching: boolean;
27
27
  isStale: boolean;
28
+ isEnabled: boolean;
28
29
  refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<CartModel, Error>>;
29
30
  fetchStatus: import("@tanstack/react-query").FetchStatus;
30
31
  promise: Promise<CartModel>;
@@ -51,6 +52,7 @@ export declare function useFetchCurrentCartWithAtp<T = CartModel>({ forceRecalcu
51
52
  isPaused: boolean;
52
53
  isRefetching: boolean;
53
54
  isStale: boolean;
55
+ isEnabled: boolean;
54
56
  refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<CartModel, Error>>;
55
57
  fetchStatus: import("@tanstack/react-query").FetchStatus;
56
58
  promise: Promise<CartModel>;
@@ -77,6 +79,7 @@ export declare function useFetchCurrentCartWithAtp<T = CartModel>({ forceRecalcu
77
79
  isPaused: boolean;
78
80
  isRefetching: boolean;
79
81
  isStale: boolean;
82
+ isEnabled: boolean;
80
83
  refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<CartModel, Error>>;
81
84
  fetchStatus: import("@tanstack/react-query").FetchStatus;
82
85
  promise: Promise<CartModel>;
@@ -103,6 +106,7 @@ export declare function useFetchCurrentCartWithAtp<T = CartModel>({ forceRecalcu
103
106
  isPaused: boolean;
104
107
  isRefetching: boolean;
105
108
  isStale: boolean;
109
+ isEnabled: boolean;
106
110
  refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<CartModel, Error>>;
107
111
  fetchStatus: import("@tanstack/react-query").FetchStatus;
108
112
  promise: Promise<CartModel>;
@@ -129,6 +133,7 @@ export declare function useFetchCurrentCartWithAtp<T = CartModel>({ forceRecalcu
129
133
  isPaused: boolean;
130
134
  isRefetching: boolean;
131
135
  isStale: boolean;
136
+ isEnabled: boolean;
132
137
  refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<CartModel, Error>>;
133
138
  fetchStatus: import("@tanstack/react-query").FetchStatus;
134
139
  promise: Promise<CartModel>;
@@ -155,6 +160,7 @@ export declare function useFetchCurrentCartWithAtp<T = CartModel>({ forceRecalcu
155
160
  isPaused: boolean;
156
161
  isRefetching: boolean;
157
162
  isStale: boolean;
163
+ isEnabled: boolean;
158
164
  refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<CartModel, Error>>;
159
165
  fetchStatus: import("@tanstack/react-query").FetchStatus;
160
166
  promise: Promise<CartModel>;
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { useQuery } from '@tanstack/react-query';
2
3
  import { fetchPagedShipToAddresses } from '../../services/customer-service.js';
3
4
 
@@ -14,7 +14,7 @@ function Sidebar({ children, className }) {
14
14
  [styles['is-closed']]: !isOpen,
15
15
  [styles['is-docked']]: isDocked,
16
16
  [styles['is-not-docked']]: !isDocked,
17
- }, className), inert: isOpen ? undefined : 'true', children: [jsx(IconButton, { className: styles.close, color: "secondary", onClick: toggle, children: jsx(StrokeCloseboxIcon, {}) }), jsx("div", { className: styles['content'], children: children })] }));
17
+ }, className), inert: isOpen ? undefined : true, children: [jsx(IconButton, { className: styles.close, color: "secondary", onClick: toggle, children: jsx(StrokeCloseboxIcon, {}) }), jsx("div", { className: styles['content'], children: children })] }));
18
18
  }
19
19
 
20
20
  export { Sidebar };