@sonic-equipment/ui 260.0.7 → 260.0.8

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

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
+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';
@@ -32,100 +32,99 @@ function ConnectedCountryLanguageSelector({ className, countries: _countries, is
     const [isOpen, setIsOpen] = useState(_isOpen ?? !CLSelectorCookie?.includes('closed=true'));
     const { countries } = useCountriesLanguages({});
     const router = useRouter();
-    // options for the selector menu
-    const menuOptions = {
-        other: t('Choose your country or region…'),
-    };
-    // option groups for the selector menu to sort the menu options under
-    const menuOptionGroups = [];
-    // array to hold option data for easy lookup on submit
-    const optionData = [];
-    // construct menu options, groups and option data
-    countries?.forEach(country => {
-        const options = [];
-        const countryCode = country.abbreviation.toLowerCase();
-        // stop if countryCode is not included in _countries prop
-        if (_countries && !_countries.includes(country.abbreviation)) {
-            return;
-        }
-        const languageCodes = country.languages
-            .map(({ languageCode }) => languageCode.toLowerCase())
-            .sort();
-        // group label to sort on
-        const groupLabel = t(`clselector.country.${countryCode}.${languageCodes[0]}`);
-        // group reactNode to display
-        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}`;
-            // add option key to group's options
-            options.push(optionKey);
-            const { alternativeHrefs, pathname } = router.url;
-            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}`;
+    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;
             }
-            // add option key/value to menu options
-            menuOptions[optionKey] =
-                environment === 'next-production' ? (jsx("span", { lang: languageCode, children: `${t(optionCountryLabel)} - ${t(optionLanguageLabel)}` })) : (
-                // in development, show the path to help identify the correct option
-                jsxs("span", { lang: languageCode, children: [`${t(optionCountryLabel)} - ${t(optionLanguageLabel)}`, jsx("code", { style: { fontSize: '12px' }, children: path })] }));
-            // add to option data
-            optionData.push({
-                country: countryCode,
-                key: optionKey,
-                language: languageCode,
-                path,
+            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' ? (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,
             });
         });
-        // push new group to groups
-        menuOptionGroups.push({
-            key: countryCode,
-            label: groupLabel,
-            options,
-            reactNode: groupReactNode,
-        });
-    });
-    // sort groups alphabetically by label
-    menuOptionGroups.sort((a, b) => a.label.localeCompare(b.label));
-    // determine default selected option
-    const defaultSelectedLanguageCountry = selectedLanguage && selectedCountry
-        ? `${selectedLanguage.toLowerCase()}-${selectedCountry.toLowerCase()}`
-        : undefined;
-    const defaultSelectedOption = defaultSelectedLanguageCountry &&
-        Object.keys(menuOptions).includes(defaultSelectedLanguageCountry)
-        ? defaultSelectedLanguageCountry
-        : undefined;
-    // handle close action
-    const handleClose = () => {
+        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');
-    };
-    // handle submit action
-    const handleSubmit = (selectedOption) => {
+    }, [setCLSelectorCookie]);
+    const handleSubmit = useCallback((selectedOption) => {
         setIsOpen(false);
         if (selectedOption === 'other') {
             setCLSelectorCookie('closed=true');
@@ -141,7 +140,7 @@ function ConnectedCountryLanguageSelector({ className, countries: _countries, is
             setCLSelectorCookie(`closed=true;language=${language};country=${country}`);
             navigate(path, { ignoreLocalePrefix: true, reload: true });
         }
-    };
+    }, [navigate, optionData, setCLSelectorCookie]);
     // react to CountryLanguageSelectorButton clicked
     useEffect(() => {
         if (showSelector) {

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

@@ -1,5 +1,5 @@
 "use client";
-import { useMemo } from 'react';
+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';
@@ -39,8 +39,10 @@ function useCountries({ enabled = true, } = {}) {
         });
         return countries;
     }, [apiCountries, sessionCountries]);
-    if (countries !== sessionCountries)
-        setSessionCountries(countries);
+    useEffect(() => {
+        if (countries !== sessionCountries)
+            setSessionCountries(countries);
+    }, [countries, sessionCountries, setSessionCountries]);
     const currentCountry = countries?.find(country => country.id === currentCountryId);
     return {
         countries,

package/dist/pages/checkout/shipping-page/shipping-page-content.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useMemo } from 'react';
 import { Button } from '../../../buttons/button/button.js';
 import { CartTotals } from '../../../cart-totals/cart-totals.js';
 import { CartTotalsSummary } from '../../../cart-totals/cart-totals-summary.js';
@@ -18,10 +19,10 @@ import styles from './shipping-page.module.css.js';
 function ShippingPageContent({ cart, editAddress, errorPatchBillingAddress, fulfillmentMethods, isGuest, isLoadingFulfillmentMethods, isPatching, isPatchingSession, onChangeFulfillmentMethod, readOnlyAddress, }) {
     const t = useFormattedMessage();
     const paths = usePaths();
-    const fulfillmentMethodOptions = fulfillmentMethods?.reduce((acc, method) => ({
+    const fulfillmentMethodOptions = useMemo(() => fulfillmentMethods?.reduce((acc, method) => ({
         ...acc,
         [method]: t(`fulfillmentmethod.${method}`),
-    }), {});
+    }), {}), [fulfillmentMethods, t]);
     const hasBillToAddress = Boolean(cart.billTo?.address1);
     const currencyCode = getCurrencyCodeBySymbol(cart.currencySymbol);
     if (!currencyCode)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonic-equipment/ui",
-  "version": "260.0.7",
+  "version": "260.0.8",
   "type": "module",
   "license": "MIT",
   "engines": {