@sonic-equipment/ui 162.0.0 → 164.0.0

package/dist/buttons/link/link.d.ts

@@ -9,8 +9,9 @@ export interface LinkProps {
     isDisabled?: boolean;
     onClick?: MouseEventHandler<HTMLElement>;
     onKeyUp?: (event: KeyboardEvent) => void;
+    role?: string;
     tabIndex?: number;
     target?: string;
     title?: string;
 }
-export declare function Link({ children, className, color, hasUnderline, href, id, isDisabled, onClick, onKeyUp, tabIndex, target, title, ...rest }: LinkProps): import("react/jsx-runtime").JSX.Element;
+export declare function Link({ children, className, color, hasUnderline, href, id, isDisabled, onClick, onKeyUp, role, tabIndex, target, title, ...rest }: LinkProps): import("react/jsx-runtime").JSX.Element;

package/dist/buttons/link/link.js

@@ -3,17 +3,17 @@ import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import styles from './link.module.css.js';
 
-function Link({ children, className, color, hasUnderline, href, id, isDisabled, onClick, onKeyUp, tabIndex, target, title, ...rest }) {
+function Link({ children, className, color, hasUnderline, href, id, isDisabled, onClick, onKeyUp, role, tabIndex, target, title, ...rest }) {
     if (href) {
         return (jsx("a", { className: clsx({
                 [styles.hover]: Boolean(href || onClick),
                 [styles['has-underline']]: hasUnderline,
-            }, styles['link'], color && styles[color], className), "data-disabled": isDisabled ? true : undefined, href: href, id: id, onClick: onClick, onKeyUp: onKeyUp, tabIndex: isDisabled ? -1 : tabIndex, target: target, title: title, ...rest, children: children }));
+            }, styles['link'], color && styles[color], className), "data-disabled": isDisabled ? true : undefined, href: href, id: id, onClick: onClick, onKeyUp: onKeyUp, role: role, tabIndex: isDisabled ? -1 : tabIndex, target: target, title: title, ...rest, children: children }));
     }
     return (jsx("button", { className: clsx({
             [styles.hover]: Boolean(href || onClick),
             [styles['has-underline']]: hasUnderline,
-        }, styles['link'], color && styles[color], className), "data-disabled": isDisabled ? true : undefined, disabled: isDisabled ? true : undefined, id: id, onClick: onClick, onKeyUp: onKeyUp, tabIndex: isDisabled ? -1 : tabIndex, title: title, type: "button", ...rest, children: children }));
+        }, styles['link'], color && styles[color], className), "data-disabled": isDisabled ? true : undefined, disabled: isDisabled ? true : undefined, id: id, onClick: onClick, onKeyUp: onKeyUp, role: role, tabIndex: isDisabled ? -1 : tabIndex, title: title, type: "button", ...rest, children: children }));
 }
 
 export { Link };

package/dist/cards/orderline-card/orderline-card.js

@@ -11,7 +11,7 @@ import styles from './orderline-card.module.css.js';
 
 function OrderLineCard(props) {
     const { deliveryDate, href, image, isReadonly, price, productId, sku, tags, title, } = props;
-    return (jsxs("article", { "aria-labelledby": `title-${productId}`, className: clsx(styles['orderline-card'], isReadonly && styles.readonly), "data-disabled": isReadonly ? true : undefined, "data-product-id": sku, "data-test-selector": "orderLineListItem", id: productId, children: [isReadonly ? (jsx("div", { className: styles.title, "data-test-selector": "orderLineCardTitle", id: `title-${productId}`, children: title })) : (jsx(RouteLink, { className: styles.title, "data-test-selector": "orderLineCardTitle", href: href, id: `title-${productId}`, children: title })), tags && tags.length > 0 && (jsx("div", { className: styles.tags, children: tags.map(tag => (jsx(Tag, { children: jsx(FormattedMessage, { fallbackValue: tag, id: `tag.${tag.toLowerCase()}` }) }, tag))) })), jsx(ProductSku, { className: styles.sku, sku: sku }), jsx(Price, { className: styles.price, currencyCode: price.currencyCode, "data-test-selector": "orderLineCardPrice", originalPrice: price.originalTotalPrice, price: price.totalPrice, pricePerUnit: price.pricePerUnit, variant: "sonic" }), jsx("div", { className: styles['image-container'], role: "presentation", children: jsx(Image, { "data-test-selector": "orderLineCardImage", ...image, fit: "contain" }) }), isReadonly ? (jsx("p", { className: styles.amount, children: jsx(FormattedMessage, { id: "Amount: {0}", replacementValues: { '0': props.quantity.toString() } }) })) : (jsx("div", { className: styles['add-to-cart-button'], children: props.addToCartButton })), deliveryDate && (jsx(DeliveryTime, { className: styles.delivery, deliveryDate: deliveryDate })), !isReadonly && (jsx("div", { className: styles.remove, "data-test-selector": "orderLineCardRemove", children: props.removeButton }))] }));
+    return (jsxs("article", { "aria-labelledby": `title-${productId}`, className: clsx(styles['orderline-card'], isReadonly && styles.readonly), "data-disabled": isReadonly ? true : undefined, "data-product-id": sku, "data-test-selector": "orderLineListItem", id: productId, children: [isReadonly ? (jsx("div", { className: styles.title, "data-test-selector": "orderLineCardTitle", id: `title-${productId}`, children: title })) : (jsx(RouteLink, { className: styles.title, "data-test-selector": "orderLineCardTitle", href: href, id: `title-${productId}`, children: title })), tags && tags.length > 0 && (jsx("div", { className: styles.tags, children: tags.map(tag => (jsx(Tag, { children: jsx(FormattedMessage, { fallbackValue: tag, id: `tag.${tag.toLowerCase()}` }) }, tag))) })), jsx(ProductSku, { className: styles.sku, sku: sku }), jsx(Price, { className: styles.price, currencyCode: price.currencyCode, "data-test-selector": "orderLineCardPrice", originalPrice: price.originalTotalPrice, price: price.totalPrice, pricePerUnit: price.pricePerUnit, variant: "sonic" }), jsx("div", { className: styles['image-container'], role: "presentation", children: jsx(Image, { "data-test-selector": "orderLineCardImage", ...image, fit: "contain" }) }), isReadonly ? (jsx("p", { className: styles.amount, children: jsx(FormattedMessage, { id: "Amount: {0}", replacementValues: { '0': props.quantity.toString() } }) })) : (jsx("div", { className: styles['add-to-cart-button'], children: props.addToCartButton })), jsx(DeliveryTime, { className: styles.delivery, deliveryDate: deliveryDate }), !isReadonly && (jsx("div", { className: styles.remove, "data-test-selector": "orderLineCardRemove", children: props.removeButton }))] }));
 }
 
 export { OrderLineCard };

package/dist/collapsables/cascading-component/cascading-component-container-context.d.ts

@@ -0,0 +1,2 @@
+import { CascadingComponentContainerContextType } from './types';
+export declare const CascadingComponentContainerContext: React.Context<CascadingComponentContainerContextType | null>;

package/dist/collapsables/cascading-component/cascading-component-container-context.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const CascadingComponentContainerContext = createContext(null);
+
+export { CascadingComponentContainerContext };

package/dist/collapsables/cascading-component/cascading-component-container-provider.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export interface CascadingComponentContainerProps {
+    children: ReactNode;
+    onClose?: VoidFunction;
+    timeout?: number;
+}
+export declare function CascadingComponentContainerProvider({ children, onClose, timeout, }: CascadingComponentContainerProps): import("react/jsx-runtime").JSX.Element;

package/dist/collapsables/cascading-component/cascading-component-container-provider.js

@@ -0,0 +1,28 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState, useMemo, useEffect } from 'react';
+import { voidFunction } from '../../shared/model/defaults.js';
+import { CascadingComponentContainerContext } from './cascading-component-container-context.js';
+import { useCascadingComponentContainer } from './use-cascading-component-container.js';
+
+function CascadingComponentContainerProvider({ children, onClose, timeout, }) {
+    const parentContext = useCascadingComponentContainer();
+    const [closeChildrenFns, updateCloseChildrenFns] = useState([]);
+    const value = useMemo(() => ({
+        close: onClose || voidFunction,
+        closeChildCascadingComponents: () => closeChildrenFns.forEach(fn => fn()),
+        registerChild: onClose => updateCloseChildrenFns(fns => [...fns, onClose]),
+        timeout,
+        unregisterChild: onClose => updateCloseChildrenFns(fns => fns.filter(fn => fn !== onClose)),
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [onClose, timeout]);
+    useEffect(() => {
+        if (!parentContext || !onClose)
+            return;
+        parentContext.registerChild(onClose);
+        return () => parentContext.unregisterChild(onClose);
+    }, [onClose, parentContext]);
+    return (jsx(CascadingComponentContainerContext.Provider, { value: value, children: children }));
+}
+
+export { CascadingComponentContainerProvider };

package/dist/collapsables/cascading-component/cascading-component-container.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface CascadingComponentProps {
+    children: React.ReactNode;
+    onClose?: VoidFunction;
+    timeout?: number;
+}
+export declare function CascadingComponentContainer({ children, onClose, timeout, }: CascadingComponentProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/collapsables/cascading-component/cascading-component-container.js

@@ -0,0 +1,8 @@
+import { jsx } from 'react/jsx-runtime';
+import { CascadingComponentContainerProvider } from './cascading-component-container-provider.js';
+
+function CascadingComponentContainer({ children, onClose, timeout, }) {
+    return (jsx(CascadingComponentContainerProvider, { onClose: onClose, timeout: timeout, children: children }));
+}
+
+export { CascadingComponentContainer };

package/dist/collapsables/cascading-component/cascading-component.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { RefHTMLElement } from '../unmounter/utils';
+import { CascadingComponentContainerProps } from './cascading-component-container-provider';
+interface CascadingComponentProps<TElement extends HTMLElement = HTMLElement, RefElement extends RefHTMLElement<TElement> = undefined> {
+    children: React.ReactNode;
+    isVisible?: boolean;
+    nodeRef: React.Ref<RefElement>;
+    onUnmounted?: () => void;
+    timeout?: number;
+}
+export declare function CascadingComponent<TElement extends HTMLElement = HTMLElement, RefElement extends RefHTMLElement<TElement> = undefined>({ children, isVisible, nodeRef, onClose, onUnmounted, timeout, }: CascadingComponentProps<TElement, RefElement> & CascadingComponentContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare function InternalCascadingComponent<TElement extends HTMLElement = HTMLElement, RefElement extends RefHTMLElement<TElement> = undefined>({ children, isVisible: _isVisible, nodeRef, onUnmounted, timeout: timeout, }: CascadingComponentProps<TElement, RefElement>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/collapsables/cascading-component/cascading-component.js

@@ -0,0 +1,44 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useEffect, useCallback } from 'react';
+import { CSSTransition } from 'react-transition-group';
+import { Unmounter } from '../unmounter/unmounter.js';
+import { createAddEndListener } from '../unmounter/utils.js';
+import { CascadingComponentContainerProvider } from './cascading-component-container-provider.js';
+import { useCascadingComponentContainer } from './use-cascading-component-container.js';
+
+function CascadingComponent({ children, isVisible = false, nodeRef, onClose, onUnmounted, timeout, }) {
+    const context = useCascadingComponentContainer();
+    if (!context) {
+        return (jsx(Fragment, { children: jsx(CascadingComponentContainerProvider, { onClose: onClose, timeout: timeout, children: jsx(InternalCascadingComponent, { isVisible: isVisible, nodeRef: nodeRef, onUnmounted: onUnmounted, timeout: timeout, children: children }) }) }));
+    }
+    return (jsx(InternalCascadingComponent, { isVisible: isVisible, nodeRef: nodeRef, onUnmounted: onUnmounted, timeout: timeout || context.timeout, children: children }));
+}
+function InternalCascadingComponent({ children, isVisible: _isVisible = false, nodeRef, onUnmounted, timeout: timeout, }) {
+    const [isVisible, setIsVisible] = useState(_isVisible);
+    const [unmount, setUnmount] = useState(false);
+    useEffect(() => {
+        if (_isVisible) {
+            setIsVisible(_isVisible);
+            setUnmount(false);
+        }
+        else {
+            setUnmount(true);
+        }
+    }, [_isVisible]);
+    useEffect(() => {
+        if (isVisible) {
+            setUnmount(false);
+        }
+    }, [isVisible]);
+    const onUnmountReady = useCallback(() => {
+        setIsVisible(false);
+    }, []);
+    const onClose = useCallback(() => {
+        setUnmount(true);
+    }, []);
+    return (jsx(CSSTransition, { mountOnEnter: true, unmountOnExit: true, ...(timeout === undefined
+            ? { addEndListener: createAddEndListener(nodeRef) }
+            : { timeout }), in: isVisible, nodeRef: nodeRef, children: jsx(Unmounter, { onUnmounted: onUnmounted, onUnmountReady: onUnmountReady, unmount: unmount, children: jsx(CascadingComponentContainerProvider, { onClose: onClose, timeout: timeout, children: children }) }) }));
+}
+
+export { CascadingComponent, InternalCascadingComponent };

package/dist/collapsables/cascading-component/types.d.ts

@@ -0,0 +1,11 @@
+export interface CascadingComponentContainerContextType {
+    close: VoidFunction;
+    closeChildCascadingComponents: VoidFunction;
+    registerChild: (closeFn: VoidFunction) => void;
+    timeout?: number;
+    unregisterChild: (closeFn: VoidFunction) => void;
+}
+export interface CascadingComponentContextType {
+    close: VoidFunction;
+    closeChildCascadingComponents: VoidFunction;
+}

package/dist/collapsables/cascading-component/use-cascading-component-container.d.ts

@@ -0,0 +1,2 @@
+import { CascadingComponentContainerContextType } from './types';
+export declare function useCascadingComponentContainer(): CascadingComponentContainerContextType | null;

package/dist/collapsables/cascading-component/use-cascading-component-container.js

@@ -0,0 +1,8 @@
+import { useContext } from 'react';
+import { CascadingComponentContainerContext } from './cascading-component-container-context.js';
+
+function useCascadingComponentContainer() {
+    return useContext(CascadingComponentContainerContext);
+}
+
+export { useCascadingComponentContainer };

package/dist/collapsables/cascading-component/use-cascading-component.d.ts

@@ -0,0 +1,2 @@
+import { CascadingComponentContextType } from './types';
+export declare function useCascadingComponent(): CascadingComponentContextType;

package/dist/collapsables/cascading-component/use-cascading-component.js

@@ -0,0 +1,14 @@
+import { useCascadingComponentContainer } from './use-cascading-component-container.js';
+
+function useCascadingComponent() {
+    const context = useCascadingComponentContainer();
+    if (!context) {
+        throw new Error('useCascadingComponent must be used within a CascadingComponentProvider');
+    }
+    return {
+        close: context.close,
+        closeChildCascadingComponents: context.closeChildCascadingComponents,
+    };
+}
+
+export { useCascadingComponent };

package/dist/collapsables/cascading-component/use-has-cascading-component-container.d.ts

@@ -0,0 +1 @@
+export declare function useHasCascadingComponentContainer(): boolean;

package/dist/collapsables/cascading-component/use-has-cascading-component-container.js

@@ -0,0 +1,7 @@
+import { useCascadingComponentContainer } from './use-cascading-component-container.js';
+
+function useHasCascadingComponentContainer() {
+    return Boolean(useCascadingComponentContainer());
+}
+
+export { useHasCascadingComponentContainer };

package/dist/collapsables/unmounter/unmounter.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+export interface UnmounterContextType {
+    registerChild: () => void;
+    unmount: boolean;
+    unregisterChild: () => void;
+}
+export declare const UnmounterContext: React.Context<UnmounterContextType | null>;
+export declare function useUnmount(): UnmounterContextType | null;
+export declare function Unmounter({ children: children, onUnmounted, onUnmountReady, unmount: _unmount, }: {
+    children: ReactNode;
+    onUnmountReady?: () => void;
+    onUnmounted?: () => void;
+    unmount?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/collapsables/unmounter/unmounter.js

@@ -0,0 +1,43 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext, useState, useEffect, useMemo } from 'react';
+
+const UnmounterContext = createContext(null);
+function useUnmount() {
+    const context = useContext(UnmounterContext);
+    return context;
+}
+function Unmounter({ children: children, onUnmounted, onUnmountReady, unmount: _unmount = false, }) {
+    const parentContext = useUnmount();
+    const [hadChildren, setHadChildren] = useState(false);
+    const [childCount, updateChildCount] = useState(0);
+    const unmount = Boolean(_unmount || parentContext?.unmount);
+    useEffect(() => {
+        return () => onUnmounted?.();
+    }, [onUnmounted]);
+    useEffect(() => {
+        if (!parentContext)
+            return;
+        parentContext.registerChild();
+        return () => {
+            parentContext.unregisterChild();
+        };
+    }, [parentContext]);
+    useEffect(() => {
+        if (!unmount || (hadChildren && childCount > 0))
+            return;
+        onUnmountReady?.();
+    }, [unmount, childCount, hadChildren, onUnmountReady]);
+    const value = useMemo(() => {
+        return {
+            registerChild: () => {
+                setHadChildren(true);
+                updateChildCount(count => count + 1);
+            },
+            unmount,
+            unregisterChild: () => updateChildCount(count => count - 1),
+        };
+    }, [unmount]);
+    return (jsx(UnmounterContext.Provider, { value: value, children: children }));
+}
+
+export { Unmounter, UnmounterContext, useUnmount };

package/dist/collapsables/unmounter/utils.d.ts

@@ -0,0 +1,2 @@
+export type RefHTMLElement<TElement extends HTMLElement> = TElement | undefined;
+export declare function createAddEndListener<TElement extends HTMLElement, RefElement extends RefHTMLElement<TElement> = undefined>(nodeRef: React.Ref<RefElement>): (doneOrNode: VoidFunction | HTMLElement, done?: VoidFunction) => void;

package/dist/collapsables/unmounter/utils.js

@@ -0,0 +1,18 @@
+function createAddEndListener(nodeRef) {
+    return function addEndListener(doneOrNode, done) {
+        if (done === undefined) {
+            if (typeof doneOrNode === 'function') {
+                if (nodeRef && 'current' in nodeRef && nodeRef.current) {
+                    return nodeRef.current.addEventListener('transitionend', doneOrNode, false);
+                }
+                throw new Error('Unsupported CSSTransition addEndListener function call');
+            }
+        }
+        else if (typeof doneOrNode !== 'function') {
+            return doneOrNode.addEventListener('transitionend', done, false);
+        }
+        throw new Error('Unsupported CSSTransition addEndListener function call');
+    };
+}
+
+export { createAddEndListener };

package/dist/country-select/country-select.js

@@ -20,7 +20,7 @@ function CountrySelect({ countries, countryNameInLanguageOfCountry = false, 'dat
     }), {}), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [countries]);
-    return (jsx(SelectField, { "data-key": selectedCountry?.id, "data-test-selector": dataTestSelector, defaultSelectedOption: defaultSelectedCountry?.id, isDisabled: isDisabled, isLoading: isLoading, isRequired: isRequired, label: t('Country'), name: name, onChange: value => onCountryChange?.(countries.find(country => country.id === value)), options: countryOptions, selectedOption: selectedCountry?.id, showLabel: showLabel, showPlaceholder: false, variant: "solid" }));
+    return (jsx(SelectField, { "data-key": selectedCountry?.id, "data-test-selector": dataTestSelector, defaultSelectedOption: defaultSelectedCountry?.id, isDisabled: isDisabled, isLoading: isLoading, isRequired: isRequired, label: t('Country'), name: name, onChange: value => onCountryChange?.(countries.find(country => country.id === value)), options: countryOptions, placeholder: t('Select a country'), selectedOption: selectedCountry?.id, showLabel: showLabel, variant: "solid" }));
 }
 
 export { CountrySelect };

package/dist/country-selector/connected-country-selector.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useMemo, useEffect } from 'react';
+import { logger } from '../logging/logger.js';
 import { useDisclosure } from '../shared/hooks/use-disclosure.js';
 import { CountrySelectorDialog } from './country-selector-dialog/country-selector-dialog.js';
 import { CountrySelectorTrigger } from './country-selector-trigger/country-selector-trigger.js';
@@ -8,18 +9,35 @@ import { useCountriesLanguages } from './use-countries-languages.js';
 
 function ConnectedCountrySelector({ defaultCountryCode, defaultLanguageCode, onChange, showCountry = true, }) {
     const { close, isOpen, open, setIsOpen } = useDisclosure(false);
-    const { countries, defaultCountry, defaultLanguage, isFetching, selectedCountry, selectedLanguage, updateCountryLanguage, } = useCountriesLanguages({
+    const { countries, defaultCountry, defaultLanguage, error, isFetching, selectedCountry, selectedLanguage, updateCountryLanguage, } = useCountriesLanguages({
         defaultCountryCode,
         defaultLanguageCode,
     });
     const isCountryLanguageSelected = useMemo(() => selectedCountry !== undefined && selectedLanguage !== undefined, [selectedCountry, selectedLanguage]);
     const isDismissable = isCountryLanguageSelected;
     useEffect(() => {
+        if (!isFetching) {
+            if (selectedCountry === undefined && selectedLanguage === undefined) {
+                logger.info('Opening country selector dialog because no country or language is selected');
+            }
+            else if (selectedCountry === undefined) {
+                logger.info('Opening country selector dialog because no country is selected');
+            }
+            else if (selectedLanguage === undefined) {
+                logger.info('Opening country selector dialog because no language is selected');
+            }
+        }
+        if (isOpen)
+            return;
         setIsOpen(!isFetching && !isCountryLanguageSelected);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isFetching, isCountryLanguageSelected]);
+    }, [isFetching, isCountryLanguageSelected, isOpen]);
     if (isFetching)
         return null;
+    if (error !== undefined) {
+        logger.error('Error fetching countries and languages:', error);
+        return null;
+    }
     return (jsxs(Fragment, { children: [jsx(CountrySelectorTrigger, { onClick: open, selectedCountry: selectedCountry, selectedLanguage: selectedLanguage, showCountry: showCountry }), jsx(CountrySelectorDialog, { countries: countries, isDismissable: isDismissable, isOpen: isOpen, onOpenChange: open => {
                     if (!isDismissable)
                         return;

package/dist/country-selector/country-selector-dialog/country-selector-dialog.js

@@ -32,7 +32,7 @@ function CountrySelectorDialog({ countries, isDismissable, isOpen, onOpenChange,
             onSubmit({ country: currentCountry, language: currentLanguage });
             e.preventDefault();
             e.stopPropagation();
-        }, shouldCloseOnInteractOutside: isDismissable, title: "Country Selector", children: jsxs("div", { className: styles.content, children: [jsx("svg", { className: styles.logo, height: "32", viewBox: "0 0 134 32", width: "134", xmlns: "http://www.w3.org/2000/svg", children: jsxs("g", { fill: "none", fillRule: "evenodd", children: [jsx("path", { d: "M15.83 11.533c2.42 0 4.382 1.977 4.382 4.415 0 8.794-7.1 15.95-15.83 15.95C1.963 31.897 0 29.92 0 27.481c0-2.354 1.83-4.278 4.134-4.408l.249-.007c3.797 0 6.905-3.036 7.058-6.826l.006-.293c0-2.438 1.963-4.415 4.383-4.415zM15.83 0c2.42 0 4.383 1.977 4.383 4.415 0 2.355-1.83 4.279-4.134 4.409l-.249.007c-3.8 0-6.906 3.035-7.059 6.824l-.006.293c0 2.438-1.962 4.415-4.382 4.415S0 18.386 0 15.948C0 7.154 7.101 0 15.83 0zm8.208 16.022c0 8.794 7.101 15.95 15.83 15.95s15.83-7.156 15.83-15.95S48.597.074 39.868.074s-15.83 7.154-15.83 15.948zm8.765 0c0-3.924 3.169-7.118 7.065-7.118 3.895 0 7.065 3.194 7.065 7.118 0 3.926-3.17 7.119-7.065 7.119-3.896 0-7.065-3.193-7.065-7.12zm76.888-11.276c-6.173 6.217-6.173 16.335-.002 22.553 6.173 6.217 16.215 6.217 22.388 0a4.44 4.44 0 0 0 .001-6.244 4.359 4.359 0 0 0-6.003-.184l-.194.184a7.04 7.04 0 0 1-9.994 0c-2.753-2.775-2.753-7.29.002-10.065a7.036 7.036 0 0 1 9.751-.233l.24.231a4.36 4.36 0 0 0 6.198 0 4.44 4.44 0 0 0-.001-6.245c-6.173-6.217-16.215-6.216-22.386.003zm-17.162-.174v22.863c0 2.439 1.961 4.416 4.381 4.416 2.422 0 4.384-1.977 4.384-4.416V4.572c0-2.439-1.962-4.416-4.384-4.416-2.42 0-4.38 1.977-4.38 4.416zM64.1.1c-2.42 0-4.383 1.977-4.383 4.415v23.07c0 2.438 1.962 4.415 4.382 4.415s4.383-1.977 4.383-4.415V8.93h3.933c3.895 0 7.065 3.192 7.065 7.118v11.537c0 2.438 1.962 4.415 4.382 4.415s4.383-1.977 4.383-4.415V16.048C88.244 7.254 81.143.1 72.414.1h-8.316z", fill: "#000" }), jsx("path", { d: "M47.036 16.022c0 3.99-3.209 7.222-7.168 7.222-3.96 0-7.169-3.233-7.169-7.222 0-3.989 3.21-7.222 7.169-7.222 3.96 0 7.168 3.233 7.168 7.222", fill: "#E30613" })] }) }), jsx("p", { className: styles.intro, children: jsx(FormattedMessage, { id: "Welcome to Sonic Equipment. Please choose your country and language below." }) }), jsxs("div", { className: styles.selects, children: [showCountry && (jsx(CountrySelect, { countries: countries, countryNameInLanguageOfCountry: true, "data-test-selector": "clSelector_country", onCountryChange: onCountryChange, selectedCountry: currentCountry })), jsx(Select, { "data-test-selector": "clSelector_language", label: t('Language'), onChange: value => setCurrentLanguage(currentCountry.languages.find(language => language.id === value) || currentLanguage), options: languageOptions, selectedOption: currentLanguage.id, showPlaceholder: false, variant: "solid" })] })] }) }));
+        }, shouldCloseOnInteractOutside: isDismissable, title: "Country Selector", children: jsxs("div", { className: styles.content, children: [jsx("svg", { className: styles.logo, height: "32", viewBox: "0 0 134 32", width: "134", xmlns: "http://www.w3.org/2000/svg", children: jsxs("g", { fill: "none", fillRule: "evenodd", children: [jsx("path", { d: "M15.83 11.533c2.42 0 4.382 1.977 4.382 4.415 0 8.794-7.1 15.95-15.83 15.95C1.963 31.897 0 29.92 0 27.481c0-2.354 1.83-4.278 4.134-4.408l.249-.007c3.797 0 6.905-3.036 7.058-6.826l.006-.293c0-2.438 1.963-4.415 4.383-4.415zM15.83 0c2.42 0 4.383 1.977 4.383 4.415 0 2.355-1.83 4.279-4.134 4.409l-.249.007c-3.8 0-6.906 3.035-7.059 6.824l-.006.293c0 2.438-1.962 4.415-4.382 4.415S0 18.386 0 15.948C0 7.154 7.101 0 15.83 0zm8.208 16.022c0 8.794 7.101 15.95 15.83 15.95s15.83-7.156 15.83-15.95S48.597.074 39.868.074s-15.83 7.154-15.83 15.948zm8.765 0c0-3.924 3.169-7.118 7.065-7.118 3.895 0 7.065 3.194 7.065 7.118 0 3.926-3.17 7.119-7.065 7.119-3.896 0-7.065-3.193-7.065-7.12zm76.888-11.276c-6.173 6.217-6.173 16.335-.002 22.553 6.173 6.217 16.215 6.217 22.388 0a4.44 4.44 0 0 0 .001-6.244 4.359 4.359 0 0 0-6.003-.184l-.194.184a7.04 7.04 0 0 1-9.994 0c-2.753-2.775-2.753-7.29.002-10.065a7.036 7.036 0 0 1 9.751-.233l.24.231a4.36 4.36 0 0 0 6.198 0 4.44 4.44 0 0 0-.001-6.245c-6.173-6.217-16.215-6.216-22.386.003zm-17.162-.174v22.863c0 2.439 1.961 4.416 4.381 4.416 2.422 0 4.384-1.977 4.384-4.416V4.572c0-2.439-1.962-4.416-4.384-4.416-2.42 0-4.38 1.977-4.38 4.416zM64.1.1c-2.42 0-4.383 1.977-4.383 4.415v23.07c0 2.438 1.962 4.415 4.382 4.415s4.383-1.977 4.383-4.415V8.93h3.933c3.895 0 7.065 3.192 7.065 7.118v11.537c0 2.438 1.962 4.415 4.382 4.415s4.383-1.977 4.383-4.415V16.048C88.244 7.254 81.143.1 72.414.1h-8.316z", fill: "#000" }), jsx("path", { d: "M47.036 16.022c0 3.99-3.209 7.222-7.168 7.222-3.96 0-7.169-3.233-7.169-7.222 0-3.989 3.21-7.222 7.169-7.222 3.96 0 7.168 3.233 7.168 7.222", fill: "#E30613" })] }) }), jsx("p", { className: styles.intro, children: jsx(FormattedMessage, { id: "Welcome to Sonic Equipment. Please choose your country and language below." }) }), jsxs("div", { className: styles.selects, children: [showCountry && (jsx(CountrySelect, { isRequired: true, countries: countries, countryNameInLanguageOfCountry: true, "data-test-selector": "clSelector_country", onCountryChange: onCountryChange, selectedCountry: currentCountry })), jsx(Select, { isRequired: true, "data-test-selector": "clSelector_language", label: t('Language'), onChange: value => setCurrentLanguage(currentCountry.languages.find(language => language.id === value) || currentLanguage), options: languageOptions, placeholder: t('Select a language'), selectedOption: currentLanguage.id, showPlaceholder: false, variant: "solid" })] })] }) }));
 }
 
 export { CountrySelectorDialog };

package/dist/country-selector/use-countries-languages.d.ts

@@ -4,10 +4,24 @@ interface UseCountriesLanguagesArgs {
     defaultCountryCode: CountryCode;
     defaultLanguageCode: LanguageCode;
 }
+interface UseCountriesLanguagesReturnTypeError {
+    countries: undefined;
+    defaultCountry: undefined;
+    defaultLanguage: undefined;
+    error: object | Error | string;
+    isFetching: false;
+    selectedCountry: undefined;
+    selectedLanguage: undefined;
+    updateCountryLanguage(args: {
+        country: Country;
+        language: Language;
+    }): Promise<void>;
+}
 interface UseCountriesLanguagesReturnTypeFetching {
     countries: undefined;
     defaultCountry: undefined;
     defaultLanguage: undefined;
+    error: undefined;
     isFetching: true;
     selectedCountry: undefined;
     selectedLanguage: undefined;
@@ -20,6 +34,7 @@ interface UseCountriesLanguagesReturnTypeSelected {
     countries: Country[];
     defaultCountry: Country;
     defaultLanguage: Language;
+    error: undefined;
     isFetching: false;
     selectedCountry: Country;
     selectedLanguage: Language;
@@ -32,6 +47,7 @@ interface UseCountriesLanguagesReturnType {
     countries: Country[];
     defaultCountry: Country;
     defaultLanguage: Language;
+    error: undefined;
     isFetching: false;
     selectedCountry: Country | undefined;
     selectedLanguage: Language | undefined;
@@ -40,5 +56,5 @@ interface UseCountriesLanguagesReturnType {
         language: Language;
     }): Promise<void>;
 }
-export declare function useCountriesLanguages({ defaultCountryCode, defaultLanguageCode, }: UseCountriesLanguagesArgs): UseCountriesLanguagesReturnType | UseCountriesLanguagesReturnTypeFetching | UseCountriesLanguagesReturnTypeSelected;
+export declare function useCountriesLanguages({ defaultCountryCode, defaultLanguageCode, }: UseCountriesLanguagesArgs): UseCountriesLanguagesReturnType | UseCountriesLanguagesReturnTypeError | UseCountriesLanguagesReturnTypeFetching | UseCountriesLanguagesReturnTypeSelected;
 export {};

package/dist/country-selector/use-countries-languages.js

@@ -1,6 +1,7 @@
 "use client";
 import { useEffect } from 'react';
 import { config } from '../config.js';
+import { logger } from '../logging/logger.js';
 import { useFetchCountriesWithLanguages } from '../shared/api/storefront/hooks/website/use-fetch-countries-with-languages.js';
 import { updateLocale } from '../shared/api/storefront/services/website-service.js';
 import { useCookie } from '../shared/hooks/use-cookie.js';
@@ -17,8 +18,8 @@ const cookieOptions = {
 function useCountriesLanguages({ defaultCountryCode, defaultLanguageCode, }) {
     const [sessionCountries, setSessionCountries] = useSessionStorage('countries-v1');
     const [currentCountryId] = useCookie('CurrentCountryId', cookieOptions);
+    // const [currentLanguageId] = ['be71b608-4876-420a-b1f5-adfe0093a72a'] // useCookie('CurrentLanguageId', cookieOptions)
     const [currentLanguageId] = useCookie('CurrentLanguageId', cookieOptions);
-    const [contextLanguageCode] = useCookie('SetContextLanguageCode', cookieOptions);
     const hasSessionCountries = Boolean(sessionCountries?.length);
     const { data: apiCountries, error, isFetching, } = useFetchCountriesWithLanguages({
         enabled: !hasSessionCountries,
@@ -32,44 +33,72 @@ function useCountriesLanguages({ defaultCountryCode, defaultLanguageCode, }) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [apiCountries]);
     async function updateCountryLanguage({ country, language, }) {
-        await updateLocale({ countryId: country.id, languageId: language.id });
+        await updateLocale({
+            countryId: country.id,
+            languageId: language.id,
+        });
     }
-    if (error)
-        throw error;
-    if (isFetching) {
+    useEffect(() => {
+        logger.info('CountryID from cookie', currentCountryId, countries?.find(country => country.id === currentCountryId)?.name ||
+            'Unknown');
+    }, [countries, currentCountryId]);
+    useEffect(() => {
+        logger.info('LanguageID from cookie', currentLanguageId, countries
+            ?.find(country => country.id === currentCountryId)
+            ?.languages.find(language => language.id === currentLanguageId)
+            ?.description || 'Unknown');
+    }, [countries, currentCountryId, currentLanguageId]);
+    try {
+        if (error)
+            throw error;
+        if (isFetching) {
+            return {
+                countries: undefined,
+                defaultCountry: undefined,
+                defaultLanguage: undefined,
+                error: undefined,
+                isFetching,
+                selectedCountry: undefined,
+                selectedLanguage: undefined,
+                updateCountryLanguage,
+            };
+        }
+        if (!countries || countries.length === 0)
+            throw new Error('No countries found');
+        const defaultCountry = countries.find(country => country.abbreviation.toUpperCase() ===
+            defaultCountryCode.toUpperCase()) || countries[0];
+        if (!defaultCountry)
+            throw new Error(`Unable to find the default country ${defaultCountryCode}`);
+        const defaultLanguage = defaultCountry.languages.find(language => language.languageCode.toUpperCase() ===
+            defaultLanguageCode.toUpperCase()) || defaultCountry.languages[0];
+        if (!defaultLanguage)
+            throw new Error(`Unable to find the default language ${defaultLanguageCode} for country ${defaultCountry.name}`);
+        const selectedCountry = countries.find(country => country.id === currentCountryId);
+        const selectedLanguage = selectedCountry &&
+            selectedCountry.languages.find(language => language.id === currentLanguageId);
+        return {
+            countries,
+            defaultCountry,
+            defaultLanguage,
+            error: undefined,
+            isFetching,
+            selectedCountry,
+            selectedLanguage,
+            updateCountryLanguage,
+        };
+    }
+    catch (error) {
         return {
             countries: undefined,
             defaultCountry: undefined,
             defaultLanguage: undefined,
-            isFetching,
+            error: error,
+            isFetching: false,
             selectedCountry: undefined,
             selectedLanguage: undefined,
             updateCountryLanguage,
         };
     }
-    if (!countries || countries.length === 0)
-        throw new Error('No countries found');
-    const defaultCountry = countries.find(country => country.abbreviation.toUpperCase() === defaultCountryCode.toUpperCase()) || countries[0];
-    if (!defaultCountry)
-        throw new Error(`Unable to find the default country ${defaultCountryCode}`);
-    const defaultLanguage = defaultCountry.languages.find(language => language.languageCode.toUpperCase() ===
-        defaultLanguageCode.toUpperCase()) || defaultCountry.languages[0];
-    if (!defaultLanguage)
-        throw new Error(`Unable to find the default language ${defaultLanguageCode} for country ${defaultCountry.name}`);
-    const selectedCountry = countries.find(country => country.id === currentCountryId);
-    const selectedLanguage = selectedCountry &&
-        (selectedCountry.languages.find(language => language.id === currentLanguageId) ||
-            selectedCountry.languages.find(language => language.languageCode.toUpperCase() ===
-                contextLanguageCode?.toUpperCase()));
-    return {
-        countries,
-        defaultCountry,
-        defaultLanguage,
-        isFetching,
-        selectedCountry,
-        selectedLanguage,
-        updateCountryLanguage,
-    };
 }
 
 export { useCountriesLanguages };

package/dist/delivery-time/delivery-time.d.ts

@@ -1,5 +1,5 @@
 export interface DeliveryTimeProps {
     className?: string;
-    deliveryDate: Date;
+    deliveryDate?: Date;
 }
 export declare function DeliveryTime({ className, deliveryDate }: DeliveryTimeProps): import("react/jsx-runtime").JSX.Element;

package/dist/delivery-time/delivery-time.js

@@ -1,19 +1,31 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { FormattedMessage } from '../intl/formatted-message.js';
-import { useFormattedMessage } from '../intl/use-formatted-message.js';
-import { getDateUnitObject } from '../shared/utils/date.js';
 import { InfoIconTooltip } from '../info-icon-tooltip/info-icon-tooltip.js';
+import { useFormattedMessage } from '../intl/use-formatted-message.js';
+import { useIntl } from '../intl/use-intl.js';
+import { formatDateToLocaleString } from '../shared/utils/date.js';
 import styles from './delivery-time.module.css.js';
 
 function DeliveryTime({ className, deliveryDate }) {
+    const { cultureCode } = useIntl();
     const t = useFormattedMessage();
-    const { number, unit } = getDateUnitObject(deliveryDate);
-    return (jsxs("div", { className: clsx(styles['delivery-time'], className), children: [jsx("p", { "data-test-selector": "deliveryTime", children: jsx(FormattedMessage, { id: "Delivery expected in {0} {1}", replacementValues: {
-                        '0': number.toString(),
-                        '1': t.pluralize('unit', unit, number),
-                    } }) }), jsx(InfoIconTooltip, { variant: "stroke", children: jsx(FormattedMessage, { id: "The expected delivery is an indication based on the product availability and the shipping location." }) })] }));
+    if (!deliveryDate) {
+        return (jsx("div", { className: clsx(styles['delivery-time'], className), children: jsx("p", { 
+                // eslint-disable-next-line @eslint-react/dom/no-dangerously-set-innerhtml
+                dangerouslySetInnerHTML: {
+                    __html: t('Availability unknown, please contact customer support for lead time or alternatives.'),
+                }, "data-test-selector": "deliveryTime_unknown" }) }));
+    }
+    const localeDate = formatDateToLocaleString(deliveryDate, cultureCode, {
+        day: 'numeric',
+        month: 'short',
+        year: 'numeric',
+    });
+    return (jsxs("div", { className: clsx(styles['delivery-time'], className), children: [jsx("p", { "data-test-selector": "deliveryTime", children: jsx(FormattedMessage, { id: "Delivery expected on {0}", replacementValues: {
+                        '0': localeDate,
+                    } }) }), jsx(InfoIconTooltip, { className: styles['info'], variant: "stroke", children: jsx(FormattedMessage, { id: "The expected delivery is an indication based on the product availability and the shipping location." }) })] }));
 }
 
 export { DeliveryTime };

package/dist/delivery-time/delivery-time.module.css.js

@@ -1,3 +1,3 @@
-var styles = {"delivery-time":"delivery-time-module-fEWEl"};
+var styles = {"delivery-time":"delivery-time-module-fEWEl","info":"delivery-time-module-Ta7xm"};
 
 export { styles as default };