@sonic-equipment/ui 0.0.119 → 1.1.0

package/dist/country-select/country-select.d.ts

@@ -0,0 +1,29 @@
+import { JSX } from 'react';
+import { Country } from '../shared/model/countries-languages';
+interface CountrySelectProps<T extends Country> {
+    countries: T[];
+    countryNameInLanguageOfCountry?: boolean;
+    'data-test-selector'?: string;
+    isDisabled?: boolean;
+    isLoading?: boolean;
+    isRequired?: boolean;
+    name?: string;
+    showLabel?: boolean;
+}
+interface CountrySelectPropsWithDefaultSelectedCountry<T extends Country> extends CountrySelectProps<T> {
+    defaultSelectedCountry: T;
+    onCountryChange?: (country: T) => void;
+}
+interface CountrySelectPropsWithSelectedCountry<T extends Country> extends CountrySelectProps<T> {
+    onCountryChange?: (country: T) => void;
+    selectedCountry: T;
+}
+interface CountrySelectPropsWithoutSelectedCountry<T extends Country> extends CountrySelectProps<T> {
+    defaultSelectedCountry?: T | undefined;
+    onCountryChange?: (country: T | undefined) => void;
+    selectedCountry?: T | undefined;
+}
+export declare function CountrySelect<T extends Country>(props: CountrySelectPropsWithDefaultSelectedCountry<T>): JSX.Element;
+export declare function CountrySelect<T extends Country>(props: CountrySelectPropsWithSelectedCountry<T>): JSX.Element;
+export declare function CountrySelect<T extends Country>(props: CountrySelectPropsWithoutSelectedCountry<T>): JSX.Element;
+export {};

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

@@ -0,0 +1,29 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { SelectField } from '../forms/fields/select-field/select-field.js';
+import { useFormattedMessage } from '../intl/use-formatted-message.js';
+
+function CountrySelect({ countries, countryNameInLanguageOfCountry = false, 'data-test-selector': dataTestSelector, defaultSelectedCountry, isDisabled, isLoading, isRequired, name, onCountryChange, selectedCountry, showLabel = true, }) {
+    const t = useFormattedMessage();
+    const translationPrefix = countryNameInLanguageOfCountry
+        ? 'clSelector'
+        : 'country';
+    const countryOptions = useMemo(() => countries
+        .map((country) => [
+        country.id,
+        t(`${translationPrefix}.${country.abbreviation}`, {
+            noTranslationId: true,
+        }),
+    ])
+        .sort(([, labelA], [, labelB]) => labelA.localeCompare(labelB))
+        .reduce((acc, [id, label]) => ({
+        ...acc,
+        [id]: label,
+    }), {}), 
+    // 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, placeholder: t('Select a country'), selectedOption: selectedCountry?.id, showLabel: showLabel, variant: "solid" }));
+}
+
+export { CountrySelect };

package/dist/country-select/hooks/use-countries.d.ts

@@ -0,0 +1,12 @@
+import { Country } from '../../shared/model/countries-languages';
+interface UseCountriesArgs {
+    enabled?: boolean;
+}
+interface UseCountriesReturnType {
+    countries: Country[] | undefined;
+    currentCountry: Country | undefined;
+    error: Error | null;
+    isFetching: boolean;
+}
+export declare function useCountries({ enabled, }?: UseCountriesArgs): UseCountriesReturnType;
+export {};

package/dist/country-select/hooks/use-countries.js

@@ -0,0 +1,55 @@
+"use client";
+import { useMemo, useEffect } from 'react';
+import { useCookie } from '../../cookies/use-cookie.js';
+import { isCountryCode, isCultureCode, isLanguageCode } from '../../intl/types.js';
+import { useFetchCountriesWithLanguages } from '../../shared/api/storefront/hooks/website/use-fetch-countries-with-languages.js';
+import { useSessionStorage } from '../../shared/local-storage/use-session-storage.js';
+
+function useCountries({ enabled = true, } = {}) {
+    const [sessionCountries, setSessionCountries] = useSessionStorage('countries-v1');
+    const [currentCountryId] = useCookie('CurrentCountryId');
+    const { data: apiCountries, error, isFetching, } = useFetchCountriesWithLanguages({
+        enabled: !sessionCountries && enabled,
+    });
+    const countries = useMemo(() => {
+        if (sessionCountries)
+            return sessionCountries;
+        const countries = apiCountries?.map((country) => {
+            if (!isCountryCode(country.abbreviation))
+                throw new Error(`Invalid country code: ${country.abbreviation}`);
+            return {
+                abbreviation: country.abbreviation,
+                currencyCode: country.currencyCode,
+                id: country.id,
+                languages: country.languages.map((language) => {
+                    if (!isCultureCode(language.cultureCode))
+                        throw new Error(`Invalid culture code: ${language.cultureCode}`);
+                    if (!isLanguageCode(language.languageCode))
+                        throw new Error(`Invalid language code: ${language.languageCode}`);
+                    return {
+                        cultureCode: language.cultureCode,
+                        description: language.description,
+                        id: language.id,
+                        languageCode: language.languageCode,
+                    };
+                }),
+                name: country.name,
+                states: null,
+            };
+        });
+        return countries;
+    }, [apiCountries, sessionCountries]);
+    useEffect(() => {
+        if (countries !== sessionCountries)
+            setSessionCountries(countries);
+    }, [countries, sessionCountries, setSessionCountries]);
+    const currentCountry = countries?.find(country => country.id === currentCountryId);
+    return {
+        countries,
+        currentCountry,
+        error,
+        isFetching,
+    };
+}
+
+export { useCountries };

package/dist/country-selector/connected-country-selector.d.ts

@@ -1,13 +1,13 @@
 import { CountryCode, LanguageCode } from '../intl/types';
 import { Country, Language } from '../shared/model/countries-languages';
-interface ConnectedCountrySelectorProps {
+export type OnCountryLanguageChangeHandler = (args: {
+    country: Country;
+    language: Language;
+}) => void;
+export interface ConnectedCountrySelectorProps {
     defaultCountryCode: CountryCode;
     defaultLanguageCode: LanguageCode;
-    onChange?: (args: {
-        country: Country;
-        language: Language;
-    }) => void;
-    showCountry?: boolean;
+    lockCountry?: boolean;
+    onChange?: OnCountryLanguageChangeHandler;
 }
-export declare function ConnectedCountrySelector({ defaultCountryCode, defaultLanguageCode, onChange, showCountry, }: ConnectedCountrySelectorProps): import("react/jsx-runtime").JSX.Element | null;
-export {};
+export declare function ConnectedCountrySelector({ defaultCountryCode, defaultLanguageCode, lockCountry, onChange, }: ConnectedCountrySelectorProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,58 @@
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useMemo, useEffect } from 'react';
+import { logger } from '../logging/logger.js';
+import { useFetchSession } from '../shared/api/storefront/hooks/authentication/use-fetch-session.js';
+import { useCookiebot } from '../shared/hooks/use-cookiebot.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';
+import { useCountriesLanguages } from './use-countries-languages.js';
+
+function ConnectedCountrySelector({ defaultCountryCode, defaultLanguageCode, lockCountry = false, onChange, }) {
+    const { data: sessionData } = useFetchSession();
+    const { close, isOpen, open, setIsOpen } = useDisclosure(false);
+    const { countries, defaultCountry, defaultLanguage, error, isFetching, selectedCountry, selectedLanguage, updateCountryLanguage, } = useCountriesLanguages({
+        billToCountryId: sessionData?.billTo?.country?.id,
+        defaultCountryCode,
+        defaultLanguageCode,
+    });
+    const { hasResponse: hasCookiebotResponse, isDialogOpen: isCookiebotDialogOpen, } = useCookiebot();
+    const isCountryLanguageSelected = useMemo(() => selectedCountry !== undefined && selectedLanguage !== undefined, [selectedCountry, selectedLanguage]);
+    const isDismissable = isCountryLanguageSelected;
+    useEffect(() => {
+        if (isOpen && !isCookiebotDialogOpen)
+            return;
+        setIsOpen(!isFetching &&
+            !isCountryLanguageSelected &&
+            hasCookiebotResponse &&
+            !isCookiebotDialogOpen);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        isFetching,
+        isCountryLanguageSelected,
+        isOpen,
+        hasCookiebotResponse,
+        isCookiebotDialogOpen,
+    ]);
+    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 || defaultCountry, selectedLanguage: selectedLanguage || defaultLanguage }), jsx(CountrySelectorDialog, { countries: countries, isDismissable: isDismissable, isOpen: isOpen, lockCountry: lockCountry, onOpenChange: open => {
+                    if (!isDismissable)
+                        return;
+                    setIsOpen(open);
+                }, onSubmit: async ({ country, language }) => {
+                    if (selectedCountry?.id === country.id &&
+                        selectedLanguage?.id === language.id)
+                        return close();
+                    await updateCountryLanguage({ country, language });
+                    close();
+                    onChange?.({ country, language });
+                }, selectedCountry: selectedCountry || defaultCountry, selectedLanguage: selectedLanguage || defaultLanguage })] }));
+}
+
+export { ConnectedCountrySelector };

package/dist/country-selector/country-selector-dialog/country-selector-dialog.d.ts

@@ -3,6 +3,7 @@ export interface CountrySelectorDialogProps {
     countries: Country[];
     isDismissable?: boolean;
     isOpen: boolean;
+    lockCountry?: boolean;
     onOpenChange?: (isOpen: boolean) => void;
     onSubmit: ({ country, language, }: {
         country: Country;
@@ -10,6 +11,5 @@ export interface CountrySelectorDialogProps {
     }) => void;
     selectedCountry: Country;
     selectedLanguage: Language;
-    showCountry?: boolean;
 }
-export declare function CountrySelectorDialog({ countries, isDismissable, isOpen, onOpenChange, onSubmit, selectedCountry, selectedLanguage, showCountry, }: CountrySelectorDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function CountrySelectorDialog({ countries, isDismissable, isOpen, lockCountry, onOpenChange, onSubmit, selectedCountry, selectedLanguage, }: CountrySelectorDialogProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,34 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useMemo, useCallback } from 'react';
+import { Button } from '../../buttons/button/button.js';
+import { CountrySelect } from '../../country-select/country-select.js';
+import { Select } from '../../forms/elements/select/select.js';
+import { FormattedMessage } from '../../intl/formatted-message.js';
+import { useFormattedMessage } from '../../intl/use-formatted-message.js';
+import { Dialog } from '../../modals/dialog/dialog.js';
+import styles from './country-selector-dialog.module.css.js';
+
+function CountrySelectorDialog({ countries, isDismissable, isOpen, lockCountry = false, onOpenChange, onSubmit, selectedCountry, selectedLanguage, }) {
+    const t = useFormattedMessage();
+    const [currentCountry, setCurrentCountry] = useState(selectedCountry);
+    const [currentLanguage, setCurrentLanguage] = useState(selectedLanguage);
+    const languageOptions = useMemo(() => currentCountry.languages.reduce((acc, language) => ({ ...acc, [language.id]: language.description }), {}), [currentCountry]);
+    const onCountryChange = useCallback((country) => {
+        setCurrentCountry(country);
+        /* Check if the current language is available in the selected country */
+        if (country.languages.some(language => language.id === currentLanguage.id))
+            return;
+        /* When the current language is not available, select the first language of the selected country */
+        const fallbackLanguage = country.languages[0];
+        if (!fallbackLanguage)
+            throw new Error(`Country ${country.name} has no languages to select`);
+        setCurrentLanguage(fallbackLanguage);
+    }, [currentLanguage.id]);
+    return (jsx(Dialog, { hideTitle: true, allowClose: isDismissable, className: {
+            dialog: styles['country-selector-dialog'],
+            modal: styles.modal,
+        }, footer: jsx(Button, { withArrow: true, "data-test-selector": "clSelector_apply", type: "submit", children: jsx(FormattedMessage, { id: "Save" }) }), hasCloseButton: isDismissable, isDismissable: isDismissable, isOpen: isOpen, onOpenChange: onOpenChange, onSubmit: () => onSubmit({ country: currentCountry, language: currentLanguage }), 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: [jsx(CountrySelect, { isRequired: true, countries: countries, countryNameInLanguageOfCountry: true, "data-test-selector": "clSelector_country", isDisabled: lockCountry, 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/country-selector-dialog/country-selector-dialog.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"country-selector-dialog":"country-selector-dialog-module-mMJS0","content":"country-selector-dialog-module-z-ZqY","logo":"country-selector-dialog-module-7VjsF","intro":"country-selector-dialog-module-IdVDt","selects":"country-selector-dialog-module-Nvikf"};
+
+export { styles as default };

package/dist/country-selector/country-selector-trigger/country-selector-trigger.d.ts

@@ -1,8 +1,7 @@
 import { Country, Language } from '../../shared/model/countries-languages';
 export interface CountrySelectorTriggerProps {
-    onClick: () => void;
+    onClick: VoidFunction;
     selectedCountry: Country | undefined;
     selectedLanguage: Language | undefined;
-    showCountry?: boolean;
 }
-export declare function CountrySelectorTrigger({ onClick, selectedCountry, selectedLanguage, showCountry, }: CountrySelectorTriggerProps): import("react/jsx-runtime").JSX.Element | undefined;
+export declare function CountrySelectorTrigger({ onClick, selectedCountry, selectedLanguage, }: CountrySelectorTriggerProps): import("react/jsx-runtime").JSX.Element | undefined;

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

@@ -0,0 +1,24 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useFormattedMessage } from '../../intl/use-formatted-message.js';
+import { Image } from '../../media/image/image.js';
+import styles from './country-selector-trigger.module.css.js';
+
+function CountrySelectorTrigger({ onClick, selectedCountry, selectedLanguage, }) {
+    const t = useFormattedMessage();
+    if (!selectedCountry || !selectedLanguage)
+        return;
+    const abbreviation = selectedCountry.abbreviation.toLowerCase();
+    const flagSrc = `https://res.cloudinary.com/dkz9eknwh/image/upload/v1729678637/images/flags/${abbreviation}.svg`;
+    const countryName = t(`clSelector.${selectedCountry.abbreviation}`, {
+        noTranslationId: true,
+    });
+    return (jsxs("button", { "aria-label": "Open country selector dialog", className: styles['country-selector-trigger'], onClick: onClick, type: "button", children: [jsx(Image, { className: styles.flag, image: {
+                    1: flagSrc,
+                    2: flagSrc,
+                    3: flagSrc,
+                    altText: countryName,
+                }, title: "" }), jsx("div", { className: styles.text, children: selectedLanguage.description })] }));
+}
+
+export { CountrySelectorTrigger };

package/dist/country-selector/country-selector-trigger/country-selector-trigger.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"country-selector-trigger":"country-selector-trigger-module-aioDu","flag":"country-selector-trigger-module-zOSJK"};
+
+export { styles as default };

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

@@ -1,13 +1,28 @@
 import { CountryCode, LanguageCode } from '../intl/types';
-import { CountriesLanguages, Country, Language } from '../shared/model/countries-languages';
+import { Country, Language } from '../shared/model/countries-languages';
 interface UseCountriesLanguagesArgs {
-    defaultCountryCode: CountryCode;
-    defaultLanguageCode: LanguageCode;
+    billToCountryId?: string;
+    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;
@@ -17,9 +32,10 @@ interface UseCountriesLanguagesReturnTypeFetching {
     }): Promise<void>;
 }
 interface UseCountriesLanguagesReturnTypeSelected {
-    countries: CountriesLanguages;
+    countries: Country[];
     defaultCountry: Country;
     defaultLanguage: Language;
+    error: undefined;
     isFetching: false;
     selectedCountry: Country;
     selectedLanguage: Language;
@@ -29,9 +45,10 @@ interface UseCountriesLanguagesReturnTypeSelected {
     }): Promise<void>;
 }
 interface UseCountriesLanguagesReturnType {
-    countries: CountriesLanguages;
+    countries: Country[];
     defaultCountry: Country;
     defaultLanguage: Language;
+    error: undefined;
     isFetching: false;
     selectedCountry: Country | undefined;
     selectedLanguage: Language | undefined;
@@ -40,5 +57,5 @@ interface UseCountriesLanguagesReturnType {
         language: Language;
     }): Promise<void>;
 }
-export declare function useCountriesLanguages({ defaultCountryCode, defaultLanguageCode, }: UseCountriesLanguagesArgs): UseCountriesLanguagesReturnType | UseCountriesLanguagesReturnTypeFetching | UseCountriesLanguagesReturnTypeSelected;
+export declare function useCountriesLanguages({ billToCountryId, defaultCountryCode, defaultLanguageCode, }: UseCountriesLanguagesArgs): UseCountriesLanguagesReturnType | UseCountriesLanguagesReturnTypeError | UseCountriesLanguagesReturnTypeFetching | UseCountriesLanguagesReturnTypeSelected;
 export {};

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

@@ -0,0 +1,95 @@
+"use client";
+import { useEffect } from 'react';
+import { useCookie } from '../cookies/use-cookie.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 { useSessionStorage } from '../shared/local-storage/use-session-storage.js';
+import { isCountry } from '../shared/model/countries-languages.js';
+
+function useCountriesLanguages({ billToCountryId, defaultCountryCode = 'NL', defaultLanguageCode = 'EN', }) {
+    const [sessionCountries, setSessionCountries] = useSessionStorage('countries-v1');
+    // get the current country ID from billToCountryId, from CurrentCountryId cookie second
+    const [cookieCountryId] = useCookie('CurrentCountryId');
+    const currentCountryId = billToCountryId ?? cookieCountryId;
+    const [currentLanguageId] = useCookie('CurrentLanguageId');
+    const hasSessionCountries = Boolean(sessionCountries?.length);
+    const { data: apiCountries, error, isFetching, } = useFetchCountriesWithLanguages({
+        enabled: !hasSessionCountries,
+        select: countries => countries.filter(country => isCountry(country)),
+    });
+    const countries = hasSessionCountries
+        ? sessionCountries
+        : apiCountries;
+    const allLanguages = [
+        ...new Map(countries
+            ?.flatMap(country => country.languages)
+            .map(language => [language.id, language])).values(),
+    ];
+    useEffect(() => {
+        setSessionCountries(apiCountries);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [apiCountries]);
+    async function updateCountryLanguage({ country, language, }) {
+        await updateLocale({
+            countryId: country.id,
+            languageId: language.id,
+        });
+    }
+    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 = allLanguages.find(language => language.id === currentLanguageId);
+        // const selectedLanguage: Language | undefined =
+        //   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,
+            error: error,
+            isFetching: false,
+            selectedCountry: undefined,
+            selectedLanguage: undefined,
+            updateCountryLanguage,
+        };
+    }
+}
+
+export { useCountriesLanguages };

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

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

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

@@ -0,0 +1,32 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { InfoIconTooltip } from '../info-icon-tooltip/info-icon-tooltip.js';
+import { FormattedMessage } from '../intl/formatted-message.js';
+import { useFormattedDate } from '../intl/use-formatted-date.js';
+import { useFormattedMessage } from '../intl/use-formatted-message.js';
+import styles from './delivery-time.module.css.js';
+
+function DeliveryTime({ className, deliveryDate }) {
+    const t = useFormattedMessage();
+    const formatDate = useFormattedDate();
+    if (deliveryDate === undefined)
+        return null;
+    if (deliveryDate === null) {
+        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 = formatDate(deliveryDate, {
+        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'], size: "sm", 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

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

package/dist/display/details/details.d.ts

@@ -0,0 +1,7 @@
+export interface DetailsProps {
+    children: React.ReactNode;
+    className?: string;
+    lang?: string;
+    summary: string;
+}
+export declare function Details({ children, className, lang, summary }: DetailsProps): import("react/jsx-runtime").JSX.Element;

package/dist/display/details/details.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { Icon } from '../../icon/icon.js';
+import styles from './details.module.css.js';
+
+function Details({ children, className, lang, summary }) {
+    return (jsxs("details", { className: clsx(styles['details'], className), lang: lang, children: [jsxs("summary", { className: styles['summary'], children: [jsx(Icon, { className: styles['arrow'], name: "ArrowRightBold", size: "xxs" }), summary] }), jsx("div", { className: styles['content'], children: children })] }));
+}
+
+export { Details };

package/dist/display/details/details.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"details":"details-module-yz0rE","summary":"details-module-mSgNu","arrow":"details-module-2O7TR","content":"details-module-EJitZ"};
+
+export { styles as default };

package/dist/display/info-display/info-display.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export interface InfoDisplayProps {
+    id: string;
+    label: string;
+    value: string | ReactNode;
+}
+export declare function InfoDisplay({ id, label, value }: InfoDisplayProps): import("react/jsx-runtime").JSX.Element;

package/dist/display/info-display/info-display.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styles from './info-display.module.css.js';
+
+function InfoDisplay({ id, label, value }) {
+    return (jsxs("div", { className: styles['info-display'], children: [jsx("span", { className: styles.label, id: id, children: label }), typeof value === 'string' ? (jsx("p", { "aria-labelledby": id, className: styles.value, children: value })) : (jsx("div", { "aria-labelledby": id, children: value }))] }));
+}
+
+export { InfoDisplay };

package/dist/display/info-display/info-display.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"info-display":"info-display-module-jsSU0","label":"info-display-module-aGbJV","value":"info-display-module-bzl9Y"};
+
+export { styles as default };

package/dist/display/price/price.d.ts

@@ -0,0 +1,18 @@
+import { CultureCode, CurrencyCode } from '../../intl/types';
+type Variant = 'default' | 'sonic';
+export interface PriceProps {
+    className?: string;
+    currencyCode: CurrencyCode;
+    'data-test-selector'?: string;
+    isVatIncluded?: boolean | null;
+    locale?: CultureCode;
+    originalPrice?: number;
+    price: number;
+    pricePerUnit?: number;
+    style?: React.CSSProperties;
+    unitAmount?: number;
+    unitType?: string;
+    variant?: Variant;
+}
+export declare function Price({ className, currencyCode, 'data-test-selector': dataTestSelector, isVatIncluded, locale, originalPrice, price, pricePerUnit, style, unitAmount, unitType, variant, }: PriceProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/display/price/price.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { useFormattedMessage } from '../../intl/use-formatted-message.js';
+import { useIntl } from '../../intl/use-intl.js';
+import { formatCurrency, parseCurrency } from '../../shared/utils/price.js';
+import styles from './price.module.css.js';
+
+function formatAndParse(opts) {
+    const priceString = formatCurrency({
+        ...opts,
+        replaceNonBreakingSpace: true,
+        useGrouping: true,
+    });
+    const parts = parseCurrency({
+        ...opts,
+        useGrouping: true,
+    });
+    return {
+        parts,
+        priceString,
+    };
+}
+function SinglePrice({ className, currencyCode, isDiscount, isOld, locale, price, small, variant = 'default', }) {
+    const { parts, priceString } = formatAndParse({
+        currencyCode,
+        locale,
+        price,
+    });
+    const { currency, decimal, fraction, integer, literal, symbolPosition } = parts;
+    return (jsxs("data", { className: clsx(className, styles['single-price'], styles[variant], small && styles['small'], isDiscount && styles['is-discount'], isOld && styles['is-old'], styles[`symbol-${symbolPosition}`]), "data-price-string": priceString, value: price, children: [symbolPosition === 'before' && (jsx("span", { className: styles.symbol, children: currency })), jsxs("span", { className: styles.number, children: [literal && jsx("span", { className: styles.literal, children: literal }), jsx("span", { className: styles.integer, children: integer }), decimal && jsx("span", { className: styles.decimal, children: decimal }), fraction && jsx("span", { className: styles.fraction, children: fraction })] }), symbolPosition === 'after' && (jsx("span", { className: styles.symbol, children: currency }))] }));
+}
+function Price({ className, currencyCode, 'data-test-selector': dataTestSelector, isVatIncluded = null, locale, originalPrice, price, pricePerUnit, style, unitAmount = 1, unitType = 'pc', variant = 'default', }) {
+    const t = useFormattedMessage();
+    const { cultureCode: defaultLocale } = useIntl();
+    const priceLocale = locale || defaultLocale;
+    const showOriginalPrice = originalPrice !== undefined && price !== originalPrice;
+    return (jsxs("div", { className: clsx(styles['price'], styles[variant], className), "data-currency-code": currencyCode, "data-current-price": price, "data-locale": priceLocale, "data-original-price": originalPrice, "data-price-per-unit": pricePerUnit, "data-test-selector": dataTestSelector || 'price', "data-unit-amount": pricePerUnit && unitAmount, "data-unit-type": pricePerUnit && unitType, "data-vat": isVatIncluded === null ? undefined : isVatIncluded, style: style, children: [showOriginalPrice && (jsx(SinglePrice, { className: styles['original-price'], currencyCode: currencyCode, isOld: showOriginalPrice, locale: priceLocale, price: originalPrice, small: variant === 'sonic', variant: variant })), jsx(SinglePrice, { className: styles['current-price'], currencyCode: currencyCode, isDiscount: showOriginalPrice, locale: priceLocale, price: price, variant: variant }), pricePerUnit && (jsxs("span", { className: styles['price-per-unit'], children: [jsx(SinglePrice, { currencyCode: currencyCode, locale: priceLocale, price: pricePerUnit }), "/", unitAmount > 1 && unitAmount, t.pluralize('priceUnit', unitType, unitAmount)] })), isVatIncluded !== null && (jsx("span", { className: styles.vat, children: t(isVatIncluded ? 'Incl. VAT' : 'Excl. VAT') }))] }));
+}
+
+export { Price };