@sonic-equipment/ui 0.0.119 → 1.0.0

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

@@ -0,0 +1,155 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useMemo, useCallback, useEffect } from 'react';
+import { useCookie } from '../cookies/use-cookie.js';
+import { useCountriesLanguages } from '../country-selector/use-countries-languages.js';
+import { isCountryLanguageCode } from '../intl/types.js';
+import { useFormattedMessage } from '../intl/use-formatted-message.js';
+import { useIntl } from '../intl/use-intl.js';
+import { useNavigate } from '../shared/routing/use-navigate.js';
+import { useRouter } from '../shared/routing/use-router.js';
+import { environment } from '../shared/utils/environment.js';
+import { CountryLanguageSelector } from './country-language-selector.js';
+
+/* eslint-disable @eslint-react/hooks-extra/no-direct-set-state-in-use-effect */
+// eslint-disable-next-line no-warning-comments
+/* TODO:
+  - defaultSelected based on current Country and Language (from URL path, determined by intlProvider)
+  - suggested value is best option from an offered list of options
+    - based on geoIP (region) and browser language preferences
+    - browser language preferences can be multiple and are listed in priority
+  - redirect to /xx-yy homepage? or map the current path to the new locale (...)?
+*/
+const pathToCLSelectionList = '/countries';
+function ConnectedCountryLanguageSelector({ className, countries: _countries, isOpen: _isOpen, selectedCountry, selectedLanguage, sticky, }) {
+    const t = useFormattedMessage();
+    const { navigate } = useNavigate();
+    const { setShowSelector, showSelector } = useIntl();
+    const cookieExpiryDate = new Date(Date.now() + 365 * 24 * 60 * 60 * 1000); // 365 days
+    const [CLSelectorCookie, setCLSelectorCookie] = useCookie('countryLanguageSelector', {
+        expires: cookieExpiryDate,
+    });
+    const [isOpen, setIsOpen] = useState(_isOpen ?? !CLSelectorCookie?.includes('closed=true'));
+    const { countries } = useCountriesLanguages({});
+    const router = useRouter();
+    const { alternativeHrefs, pathname } = router.url;
+    const { defaultSelectedOption, menuOptionGroups, menuOptions, optionData } = useMemo(() => {
+        const menuOptions = {
+            other: t('Choose your country or region…'),
+        };
+        const menuOptionGroups = [];
+        const optionData = [];
+        countries?.forEach(country => {
+            const options = [];
+            const countryCode = country.abbreviation.toLowerCase();
+            if (_countries && !_countries.includes(country.abbreviation)) {
+                return;
+            }
+            const languageCodes = country.languages
+                .map(({ languageCode }) => languageCode.toLowerCase())
+                .sort();
+            const groupLabel = t(`clselector.country.${countryCode}.${languageCodes[0]}`);
+            const groupReactNode = languageCodes.flatMap((languageCode, index) => {
+                const translation = t(`clselector.country.${countryCode}.${languageCode}`);
+                return index === 0
+                    ? [
+                        jsx("span", { lang: languageCode, children: translation }, languageCode),
+                    ]
+                    : [
+                        '/',
+                        jsx("span", { lang: languageCode, children: translation }, languageCode),
+                    ];
+            });
+            languageCodes.forEach(languageCode => {
+                const optionKey = `${languageCode}-${countryCode}`;
+                const optionCountryLabel = `clselector.country.${countryCode}.${languageCode}`;
+                const optionLanguageLabel = `clselector.language.${languageCode}.${languageCode}`;
+                options.push(optionKey);
+                let path;
+                if (alternativeHrefs && alternativeHrefs[optionKey]) {
+                    path = `/${optionKey}${alternativeHrefs[optionKey]}`;
+                }
+                else if (!alternativeHrefs ||
+                    Object.keys(alternativeHrefs).length === 0) {
+                    const currentCountryLanguage = pathname.split('/')[1]?.toLowerCase();
+                    path = isCountryLanguageCode(currentCountryLanguage)
+                        ? pathname
+                            .toLowerCase()
+                            .replace(`${currentCountryLanguage}`, `${optionKey}`)
+                        : `/${optionKey}${pathname}`;
+                }
+                else {
+                    path = `/${optionKey}`;
+                }
+                menuOptions[optionKey] =
+                    environment === 'next-production' ||
+                        environment === 'production' ? (jsx("span", { lang: languageCode, children: `${t(optionCountryLabel)} - ${t(optionLanguageLabel)}` })) : (jsxs("span", { lang: languageCode, children: [`${t(optionCountryLabel)} - ${t(optionLanguageLabel)}`, jsx("code", { style: { fontSize: '12px' }, children: path })] }));
+                optionData.push({
+                    country: countryCode,
+                    key: optionKey,
+                    language: languageCode,
+                    path,
+                });
+            });
+            menuOptionGroups.push({
+                key: countryCode,
+                label: groupLabel,
+                options,
+                reactNode: groupReactNode,
+            });
+        });
+        menuOptionGroups.sort((a, b) => a.label.localeCompare(b.label));
+        const defaultSelectedLanguageCountry = selectedLanguage && selectedCountry
+            ? `${selectedLanguage.toLowerCase()}-${selectedCountry.toLowerCase()}`
+            : undefined;
+        const defaultSelectedOption = defaultSelectedLanguageCountry &&
+            Object.keys(menuOptions).includes(defaultSelectedLanguageCountry)
+            ? defaultSelectedLanguageCountry
+            : undefined;
+        return {
+            defaultSelectedOption,
+            menuOptionGroups,
+            menuOptions,
+            optionData,
+        };
+    }, [
+        _countries,
+        alternativeHrefs,
+        countries,
+        pathname,
+        selectedCountry,
+        selectedLanguage,
+        t,
+    ]);
+    const handleClose = useCallback(() => {
+        setIsOpen(false);
+        setCLSelectorCookie('closed=true');
+    }, [setCLSelectorCookie]);
+    const handleSubmit = useCallback((selectedOption) => {
+        setIsOpen(false);
+        if (selectedOption === 'other') {
+            setCLSelectorCookie('closed=true');
+            navigate(pathToCLSelectionList, {
+                ignoreLocalePrefix: true,
+            });
+        }
+        else {
+            const option = optionData.find(option => option.key === selectedOption);
+            if (!option)
+                return;
+            const { country, language, path } = option;
+            setCLSelectorCookie(`closed=true;language=${language};country=${country}`);
+            navigate(path, { ignoreLocalePrefix: true, reload: true });
+        }
+    }, [navigate, optionData, setCLSelectorCookie]);
+    // react to CountryLanguageSelectorButton clicked
+    useEffect(() => {
+        if (showSelector) {
+            setShowSelector(false);
+            setIsOpen(true);
+        }
+    }, [showSelector, setShowSelector]);
+    return (jsx(CountryLanguageSelector, { className: className, defaultSelectedOption: defaultSelectedOption, isOpen: isOpen, onClose: handleClose, onSubmit: handleSubmit, optionGroups: menuOptionGroups, options: menuOptions, sticky: sticky }));
+}
+
+export { ConnectedCountryLanguageSelector };

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

@@ -0,0 +1,18 @@
+import { SelectFieldOptionGroup } from '../forms/fields/select-field/select-field';
+import { CountryLanguageCode } from '../intl/types';
+export type CountryLanguageSelectorOptions = {
+    [K in CountryLanguageCode]: string | React.ReactNode;
+} & {
+    other?: string | React.ReactNode;
+};
+export interface CountryLanguageSelectorProps {
+    className?: string;
+    defaultSelectedOption?: CountryLanguageCode | 'other';
+    isOpen?: boolean;
+    onClose?: () => void;
+    onSubmit: (selectedOption: CountryLanguageCode | 'other') => void;
+    optionGroups?: SelectFieldOptionGroup<CountryLanguageCode>[];
+    options: CountryLanguageSelectorOptions;
+    sticky?: boolean;
+}
+export declare function CountryLanguageSelector({ className, defaultSelectedOption, isOpen, onClose, onSubmit, optionGroups, options, sticky, }: CountryLanguageSelectorProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,52 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import { clsx } from 'clsx';
+import { Button } from '../buttons/button/button.js';
+import { CloseButton } from '../buttons/close-button/close-button.js';
+import { SelectField } from '../forms/fields/select-field/select-field.js';
+import { Form } from '../forms/layout/form/form.js';
+import { useFormattedMessage } from '../intl/use-formatted-message.js';
+import { useResizeObserver } from '../shared/hooks/use-resize-observer.js';
+import styles from './country-language-selector.module.css.js';
+
+function CountryLanguageSelector({ className, defaultSelectedOption, isOpen, onClose, onSubmit, optionGroups, options, sticky = true, }) {
+    const t = useFormattedMessage();
+    const title = t('Select a region and language');
+    const [selectedKey, setSelectedKey] = useState(defaultSelectedOption);
+    const [isInitialized, setIsInitialized] = useState(false);
+    const { ref: clSelectorRef } = useResizeObserver((_, size) => {
+        const height = size.height;
+        document?.documentElement.style.setProperty('--clselector-height', `${height}px`);
+    });
+    const focusTimeoutRef = useRef();
+    useEffect(() => {
+        // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
+        setIsInitialized(true);
+    }, []);
+    const handleSubmit = () => {
+        if (selectedKey)
+            onSubmit(selectedKey);
+    };
+    useEffect(() => {
+        if (isOpen) {
+            const el = document?.getElementById('country-language-selector');
+            el?.scrollIntoView();
+            focusTimeoutRef.current = window?.setTimeout(() => {
+                el?.focus();
+            }, 100);
+        }
+        return () => {
+            if (focusTimeoutRef.current) {
+                clearTimeout(focusTimeoutRef.current);
+            }
+        };
+    }, [clSelectorRef, isOpen]);
+    return (jsx("header", { ref: clSelectorRef, "aria-label": title, className: clsx(styles['country-language-selector'], isInitialized && styles['is-initialized'], isOpen && styles['is-open'], sticky && styles['sticky'], className), "data-test-selector": "country-language-selector", id: "country-language-selector", 
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        tabIndex: 0, children: jsxs("div", { className: styles['body'], children: [jsx("p", { className: styles['explanation'], children: t('Choose another region if you want to see the content for your location and shop online.') }), jsxs(Form, { className: styles['form'], onSubmit: handleSubmit, children: [jsx(SelectField, { className: styles['menu'], "data-test-selector": "country-language-selector-menu", defaultSelectedOption: defaultSelectedOption === 'other'
+                                ? undefined
+                                : defaultSelectedOption, label: title, name: "cl", onChange: key => setSelectedKey(key), optionGroups: optionGroups, options: options, placeholder: title, showLabel: false, variant: "solid" }), jsx(Button, { light: true, className: styles['submit'], "data-test-selector": "country-language-selector-submit", isDisabled: !selectedKey, size: "sm", type: "submit", variant: "solid", children: t('Continue') })] }), jsx(CloseButton, { className: styles['close'], "data-test-selector": "country-language-selector-close", label: t('Close and don’t show again'), onClick: onClose, size: "sm" })] }) }));
+}
+
+export { CountryLanguageSelector };

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

@@ -0,0 +1,3 @@
+var styles = {"country-language-selector":"country-language-selector-module-lW6eg","sticky":"country-language-selector-module-fsfbv","is-open":"country-language-selector-module-XttBY","is-initialized":"country-language-selector-module-lfI2j","body":"country-language-selector-module-4qE7H","explanation":"country-language-selector-module-UvT-P","form":"country-language-selector-module-pZ3tL","close":"country-language-selector-module-sJF5B"};
+
+export { styles as default };

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

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

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

@@ -0,0 +1,22 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useCountriesLanguages } from '../country-selector/use-countries-languages.js';
+import { useIntl } from '../intl/use-intl.js';
+import { useFetchSession } from '../shared/api/storefront/hooks/authentication/use-fetch-session.js';
+import { CountryLanguageSelectorButton } from './country-language-selector-button.js';
+
+function ConnectedCountryLanguageSelectorButton() {
+    const { setShowSelector } = useIntl();
+    const { data: sessionData } = useFetchSession();
+    const { defaultCountry, defaultLanguage, selectedCountry, selectedLanguage } = useCountriesLanguages({
+        billToCountryId: sessionData?.billTo?.country?.id,
+    });
+    const onClick = () => {
+        setShowSelector(true);
+    };
+    const countryCode = selectedCountry?.abbreviation ?? defaultCountry?.abbreviation;
+    const languageCode = selectedLanguage?.languageCode ?? defaultLanguage?.languageCode;
+    return (jsx(CountryLanguageSelectorButton, { countryCode: countryCode, languageCode: languageCode, onClick: onClick }));
+}
+
+export { ConnectedCountryLanguageSelectorButton };

package/dist/country-language-selector-button/country-language-selector-button.d.ts

@@ -0,0 +1,7 @@
+import { CountryCode, LanguageCode } from '../intl/types';
+export interface CountryLanguageSelectorButtonProps {
+    countryCode?: CountryCode;
+    languageCode?: LanguageCode;
+    onClick?: () => void;
+}
+export declare function CountryLanguageSelectorButton({ countryCode, languageCode, onClick, }: CountryLanguageSelectorButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/country-language-selector-button/country-language-selector-button.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Link } from '../buttons/link/link.js';
+import { Flag } from '../flag/flag.js';
+import { useFormattedMessage } from '../intl/use-formatted-message.js';
+import styles from './country-language-selector-button.module.css.js';
+
+function CountryLanguageSelectorButton({ countryCode, languageCode, onClick, }) {
+    const t = useFormattedMessage();
+    const title = t('Select another country or language…');
+    if (!countryCode || !languageCode)
+        return jsx("span", { className: styles['country-language-selector-button'] });
+    const countryLabel = t(`clselector.country.${countryCode.toLowerCase()}.${languageCode.toLowerCase()}`);
+    const languageLabel = t(`clselector.language.${languageCode.toLowerCase()}.${languageCode.toLowerCase()}`);
+    return (jsxs(Link, { "aria-label": title, className: styles['country-language-selector-button'], "data-test-selector": "country-language-selector-button", onClick: onClick, title: title, children: [jsx(Flag, { className: styles.flag, country: countryCode, label: "" }), jsxs("div", { className: styles['label'], children: [jsx("data", { className: styles['country'], children: countryLabel }), jsx("data", { className: styles['language'], children: languageLabel })] })] }));
+}
+
+export { CountryLanguageSelectorButton };

package/dist/country-language-selector-button/country-language-selector-button.module.css.js

@@ -0,0 +1,3 @@
+var styles = {"country-language-selector-button":"country-language-selector-button-module-SN6I2","label":"country-language-selector-button-module-gV7Cp","country":"country-language-selector-button-module-1Cz2x","language":"country-language-selector-button-module-Ix4GQ"};
+
+export { styles as default };

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 };